freeCodeCamp 每日编程挑战第 71 题Tip Calculator小费计算器完整解析【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇指南深入解析 freeCodeCamp 开源仓库中每日编程挑战Daily Coding Challenge第 71 题「Tip Calculator」从题目描述、输入/输出格式约定、测试断言到官方参考解法与字符串/浮点精度陷阱逐一拆解。结合仓库中挑战区块配置daily-coding-challenges-javascript与 API 路由源码帮助你理解这道题在 freeCodeCamp 挑战体系中的真实位置并掌握一套可复用、可通过全部测试的 JavaScript 实现。题目速览返回三种小费金额的数组在 挑战 71 的 Markdown 源文件 中题目要求非常简单直接给定一顿饭的价格meal price和一个自定义小费百分比custom tip percent返回一个包含三种小费金额的数组15%、20%以及自定义百分比。也就是说无论用户传入什么价格函数都需要固定输出三个元素按 15% 计算的小费、按 20% 计算的小费、按自定义百分比计算的小费。输入与输出格式约定题目对字符串格式做了严格约定这是本题的核心考点之一价格格式$N.NN例如$10.00、$89.67、$19.85自定义百分比格式25%即数字后跟百分号返回值格式同样是$N.NN且金额需要四舍五入保留两位小数。题目给出的标准示例calculateTips($10.00, 25%) // 应返回 [$1.50, $2.00, $2.50] // 计算过程10.00 * 15% 1.5010.00 * 20% 2.0010.00 * 25% 2.50输入参数解析如何从带符号字符串中提取数字价格字符串$N.NN以美元符号$开头百分比字符串25%以百分号%结尾。官方参考解法使用slice配合parseFloat完成解析function calculateTips(mealPrice, customTip) { const meal parseFloat(mealPrice.slice(1)); // 去掉开头的 $ const customPercent parseFloat(customTip.slice(0, -1)); // 去掉末尾的 % // ... }解析要点拆解步骤代码说明提取价格数字mealPrice.slice(1)从下标 1 开始截取丢弃$10.00中的$得到10.00提取百分比数字customTip.slice(0, -1)截取到倒数第一个字符之前丢弃25%中的%得到25字符串转数字parseFloat(...)将10.00转为数值10将25转为数值25这里使用parseFloat而非Number或parseInt是经过考量的parseInt(10.00, 10)会直接得到整数10对于价格这种带两位小数的字符串虽然结果碰巧正确但语义上不够严谨parseFloat(10.00)能保留浮点语义对89.67、19.85这类非整数值也能正确解析由于题目保证输入严格符合$N.NN与N%格式因此sliceparseFloat的组合已经足够健壮无需额外处理异常输入。核心逻辑百分比到金额的换算拿到三个百分比[15, 20, customPercent]后对每个百分比执行统一的换算公式金额 价格 × 百分比 ÷ 100官方解法用Array.prototype.map一次性完成「换算 格式化」function calculateTips(mealPrice, customTip) { const meal parseFloat(mealPrice.slice(1)); const customPercent parseFloat(customTip.slice(0, -1)); const tips [15, 20, customPercent]; return tips.map(percent { const amount (meal * percent / 100).toFixed(2); return $${amount}; }); }逐行说明const tips [15, 20, customPercent];—— 固定百分比数组自定义百分比放在第三位保证返回顺序为[15%, 20%, 自定义]meal * percent / 100—— 完成百分比换算如10 * 25 / 100 2.5.toFixed(2)—— 将数值格式化为保留两位小数的字符串同时执行四舍五入如2.5变为2.50、13.4505变为13.45$${amount}—— 模板字符串重新拼回$前缀得到$2.50。测试断言解读三组用例背后的设计意图题目在--hints--部分提供了三组测试均由assert.deepEqual执行严格深比较。这三组用例覆盖了不同的边界情况用例一整数价格 常规自定义百分比assert.deepEqual(calculateTips($10.00, 25%), [$1.50, $2.00, $2.50]);10.00的价格让所有结果都是精确的两位小数1.50、2.00、2.50是验证基本流程是否正确的「冒烟测试」。用例二小数价格 非常规百分比assert.deepEqual(calculateTips($89.67, 26%), [$13.45, $17.93, $23.31]);价格$89.67本身带两位小数换算结果不再是整数89.67 × 15% 13.4505四舍五入为13.4589.67 × 20% 17.934四舍五入为17.9389.67 × 26% 23.3142四舍五入为23.31。这一组用例专门验证toFixed(2)的四舍五入行为。同时注意89.67 × 15%在浮点运算中实际为13.450500000000001一类的近似值toFixed(2)恰好将其收敛为13.45这也是本组用例能通过的浮点细节详见下文「精度陷阱」小节。用例三小数价格 小于默认值的自定义百分比assert.deepEqual(calculateTips($19.85, 9%), [$2.98, $3.97, $1.79]);19.85 × 15% 2.9775四舍五入为2.9819.85 × 20% 3.9719.85 × 9% 1.7865四舍五入为1.79。第三组用例验证了两件事自定义百分比可以小于15%即结果数组中第三项不一定最大以及9%这种个位数百分比也能被正确解析。浮点精度陷阱为什么直接相乘再toFixed是安全的JavaScript 的数字遵循 IEEE 754 双精度浮点标准89.67 × 15 / 100这类运算存在二进制近似误差。例如89.67 * 15 / 100; // 实际得到 13.450500000000001由于题目要求「四舍五入到两位小数」而toFixed(2)基于浮点近似值执行舍入大多数情况下恰好落在目标值上因此官方解法选择直接相乘再toFixed(2)是针对该测试集的最简正确方案。但需要说明其适用前提该方案依赖测试数据本身的数值特性并非对任意输入都绝对安全。若你希望实现更保守的十进制语义可以先把价格乘以 100 转成分单位整数再做运算最后除以 100 并格式化function calculateTips(mealPrice, customTip) { const cents Math.round(parseFloat(mealPrice.slice(1)) * 100); const customPercent parseFloat(customTip.slice(0, -1)); const tips [15, 20, customPercent]; return tips.map(percent { const amount ((cents * percent) / 100 / 100).toFixed(2); return $${amount}; }); }在 freeCodeCamp 的自动评分环境中assert.deepEqual要求返回值精确等于期望数组包括字符串内容与元素顺序因此无论采用哪种写法最终都必须保证返回[$1.50, $2.00, $2.50]这种「带$前缀、两位小数」的字符串数组。题目在 freeCodeCamp 仓库中的位置与运行机制挑战区块配置本题位于 JavaScript 每日挑战区块daily-coding-challenges-javascript中该区块的元数据定义在 curriculum/structure/blocks/daily-coding-challenges-javascript.json区块共包含365 道挑战从Challenge 1: Vowel Balance到Challenge 365: The Last Challenge: Bucket Fill 3Challenge 71 是其中一部分区块标记为isUpcomingChange: true属于计划中的新内容usesMultifileEditor: true表示该区块挑战使用多文件编辑器helpCategory: JavaScript归类到 JavaScript 帮助分类从第 25 题起挑战开始附带了独立的 ID本题 ID 为68cae5b538ff798bbd4da009与 Markdown 文件名的前 24 位一致68cae5b538ff798bbd4da009.md。后端如何提供挑战数据每日挑战的内容由 API 侧提供。在 api/src/daily-coding-challenge/routes/daily-coding-challenge.ts 中注册了 6 个公开的 GET 路由用于按日期、按月份、按「今天」等方式获取挑战元数据GET /daily-coding-challenge/date/:date—— 按YYYY-MM-DD精确获取某天挑战GET /daily-coding-challenge/day/:day—— 按MM-DD获取会通过 helpers.ts 中的getSourceDate映射到原始挑战日期形成一个可循环的年度挑战周期GET /daily-coding-challenge/today—— 获取美国中部时区US Central当天的挑战GET /daily-coding-challenge/month/:month、/all、/newest—— 批量与最新日期查询。值得注意的是这些接口只负责返回挑战信息描述、测试、初始代码挑战的提交与判定仍走主挑战完成路由这一点在该路由文件的 JSDoc 注释中明确说明。题目的描述文本、--hints--测试与--seed--初始代码正是以结构化形式进入dailyCodingChallenges表并最终通过上述接口下发到前端的。前端入口在客户端client/src/components/daily-coding-challenge/widget.tsx 提供了「今日挑战」与「历史归档」两个入口按钮学习路径为/learn/daily-coding-challenge/帮助用户每天进入当日的编码挑战页面。总结本题的完整解题路径解析输入用mealPrice.slice(1)去掉$用customTip.slice(0, -1)去掉%再用parseFloat转成数字构造百分比列表[15, 20, customPercent]保持固定顺序逐项换算并格式化(meal * percent / 100).toFixed(2)再拼接$前缀返回字符串数组确保元素顺序与$N.NN格式和测试断言完全一致。掌握这道题的核心价值在于字符串格式解析 数组映射 浮点格式化是大量每日编程挑战共用的基础模式理解slice/parseFloat/toFixed/模板字符串的组合方式后同类题目如百分比换算、单位换算、金额格式化都可以直接迁移这一套路。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 freeCodeCamp 每日编程挑战第 71 题：Tip Calculator（小费计算器）完整解析
freeCodeCamp 每日编程挑战第 71 题Tip Calculator小费计算器完整解析【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇指南深入解析 freeCodeCamp 开源仓库中每日编程挑战Daily Coding Challenge第 71 题「Tip Calculator」从题目描述、输入/输出格式约定、测试断言到官方参考解法与字符串/浮点精度陷阱逐一拆解。结合仓库中挑战区块配置daily-coding-challenges-javascript与 API 路由源码帮助你理解这道题在 freeCodeCamp 挑战体系中的真实位置并掌握一套可复用、可通过全部测试的 JavaScript 实现。题目速览返回三种小费金额的数组在 挑战 71 的 Markdown 源文件 中题目要求非常简单直接给定一顿饭的价格meal price和一个自定义小费百分比custom tip percent返回一个包含三种小费金额的数组15%、20%以及自定义百分比。也就是说无论用户传入什么价格函数都需要固定输出三个元素按 15% 计算的小费、按 20% 计算的小费、按自定义百分比计算的小费。输入与输出格式约定题目对字符串格式做了严格约定这是本题的核心考点之一价格格式$N.NN例如$10.00、$89.67、$19.85自定义百分比格式25%即数字后跟百分号返回值格式同样是$N.NN且金额需要四舍五入保留两位小数。题目给出的标准示例calculateTips($10.00, 25%) // 应返回 [$1.50, $2.00, $2.50] // 计算过程10.00 * 15% 1.5010.00 * 20% 2.0010.00 * 25% 2.50输入参数解析如何从带符号字符串中提取数字价格字符串$N.NN以美元符号$开头百分比字符串25%以百分号%结尾。官方参考解法使用slice配合parseFloat完成解析function calculateTips(mealPrice, customTip) { const meal parseFloat(mealPrice.slice(1)); // 去掉开头的 $ const customPercent parseFloat(customTip.slice(0, -1)); // 去掉末尾的 % // ... }解析要点拆解步骤代码说明提取价格数字mealPrice.slice(1)从下标 1 开始截取丢弃$10.00中的$得到10.00提取百分比数字customTip.slice(0, -1)截取到倒数第一个字符之前丢弃25%中的%得到25字符串转数字parseFloat(...)将10.00转为数值10将25转为数值25这里使用parseFloat而非Number或parseInt是经过考量的parseInt(10.00, 10)会直接得到整数10对于价格这种带两位小数的字符串虽然结果碰巧正确但语义上不够严谨parseFloat(10.00)能保留浮点语义对89.67、19.85这类非整数值也能正确解析由于题目保证输入严格符合$N.NN与N%格式因此sliceparseFloat的组合已经足够健壮无需额外处理异常输入。核心逻辑百分比到金额的换算拿到三个百分比[15, 20, customPercent]后对每个百分比执行统一的换算公式金额 价格 × 百分比 ÷ 100官方解法用Array.prototype.map一次性完成「换算 格式化」function calculateTips(mealPrice, customTip) { const meal parseFloat(mealPrice.slice(1)); const customPercent parseFloat(customTip.slice(0, -1)); const tips [15, 20, customPercent]; return tips.map(percent { const amount (meal * percent / 100).toFixed(2); return $${amount}; }); }逐行说明const tips [15, 20, customPercent];—— 固定百分比数组自定义百分比放在第三位保证返回顺序为[15%, 20%, 自定义]meal * percent / 100—— 完成百分比换算如10 * 25 / 100 2.5.toFixed(2)—— 将数值格式化为保留两位小数的字符串同时执行四舍五入如2.5变为2.50、13.4505变为13.45$${amount}—— 模板字符串重新拼回$前缀得到$2.50。测试断言解读三组用例背后的设计意图题目在--hints--部分提供了三组测试均由assert.deepEqual执行严格深比较。这三组用例覆盖了不同的边界情况用例一整数价格 常规自定义百分比assert.deepEqual(calculateTips($10.00, 25%), [$1.50, $2.00, $2.50]);10.00的价格让所有结果都是精确的两位小数1.50、2.00、2.50是验证基本流程是否正确的「冒烟测试」。用例二小数价格 非常规百分比assert.deepEqual(calculateTips($89.67, 26%), [$13.45, $17.93, $23.31]);价格$89.67本身带两位小数换算结果不再是整数89.67 × 15% 13.4505四舍五入为13.4589.67 × 20% 17.934四舍五入为17.9389.67 × 26% 23.3142四舍五入为23.31。这一组用例专门验证toFixed(2)的四舍五入行为。同时注意89.67 × 15%在浮点运算中实际为13.450500000000001一类的近似值toFixed(2)恰好将其收敛为13.45这也是本组用例能通过的浮点细节详见下文「精度陷阱」小节。用例三小数价格 小于默认值的自定义百分比assert.deepEqual(calculateTips($19.85, 9%), [$2.98, $3.97, $1.79]);19.85 × 15% 2.9775四舍五入为2.9819.85 × 20% 3.9719.85 × 9% 1.7865四舍五入为1.79。第三组用例验证了两件事自定义百分比可以小于15%即结果数组中第三项不一定最大以及9%这种个位数百分比也能被正确解析。浮点精度陷阱为什么直接相乘再toFixed是安全的JavaScript 的数字遵循 IEEE 754 双精度浮点标准89.67 × 15 / 100这类运算存在二进制近似误差。例如89.67 * 15 / 100; // 实际得到 13.450500000000001由于题目要求「四舍五入到两位小数」而toFixed(2)基于浮点近似值执行舍入大多数情况下恰好落在目标值上因此官方解法选择直接相乘再toFixed(2)是针对该测试集的最简正确方案。但需要说明其适用前提该方案依赖测试数据本身的数值特性并非对任意输入都绝对安全。若你希望实现更保守的十进制语义可以先把价格乘以 100 转成分单位整数再做运算最后除以 100 并格式化function calculateTips(mealPrice, customTip) { const cents Math.round(parseFloat(mealPrice.slice(1)) * 100); const customPercent parseFloat(customTip.slice(0, -1)); const tips [15, 20, customPercent]; return tips.map(percent { const amount ((cents * percent) / 100 / 100).toFixed(2); return $${amount}; }); }在 freeCodeCamp 的自动评分环境中assert.deepEqual要求返回值精确等于期望数组包括字符串内容与元素顺序因此无论采用哪种写法最终都必须保证返回[$1.50, $2.00, $2.50]这种「带$前缀、两位小数」的字符串数组。题目在 freeCodeCamp 仓库中的位置与运行机制挑战区块配置本题位于 JavaScript 每日挑战区块daily-coding-challenges-javascript中该区块的元数据定义在 curriculum/structure/blocks/daily-coding-challenges-javascript.json区块共包含365 道挑战从Challenge 1: Vowel Balance到Challenge 365: The Last Challenge: Bucket Fill 3Challenge 71 是其中一部分区块标记为isUpcomingChange: true属于计划中的新内容usesMultifileEditor: true表示该区块挑战使用多文件编辑器helpCategory: JavaScript归类到 JavaScript 帮助分类从第 25 题起挑战开始附带了独立的 ID本题 ID 为68cae5b538ff798bbd4da009与 Markdown 文件名的前 24 位一致68cae5b538ff798bbd4da009.md。后端如何提供挑战数据每日挑战的内容由 API 侧提供。在 api/src/daily-coding-challenge/routes/daily-coding-challenge.ts 中注册了 6 个公开的 GET 路由用于按日期、按月份、按「今天」等方式获取挑战元数据GET /daily-coding-challenge/date/:date—— 按YYYY-MM-DD精确获取某天挑战GET /daily-coding-challenge/day/:day—— 按MM-DD获取会通过 helpers.ts 中的getSourceDate映射到原始挑战日期形成一个可循环的年度挑战周期GET /daily-coding-challenge/today—— 获取美国中部时区US Central当天的挑战GET /daily-coding-challenge/month/:month、/all、/newest—— 批量与最新日期查询。值得注意的是这些接口只负责返回挑战信息描述、测试、初始代码挑战的提交与判定仍走主挑战完成路由这一点在该路由文件的 JSDoc 注释中明确说明。题目的描述文本、--hints--测试与--seed--初始代码正是以结构化形式进入dailyCodingChallenges表并最终通过上述接口下发到前端的。前端入口在客户端client/src/components/daily-coding-challenge/widget.tsx 提供了「今日挑战」与「历史归档」两个入口按钮学习路径为/learn/daily-coding-challenge/帮助用户每天进入当日的编码挑战页面。总结本题的完整解题路径解析输入用mealPrice.slice(1)去掉$用customTip.slice(0, -1)去掉%再用parseFloat转成数字构造百分比列表[15, 20, customPercent]保持固定顺序逐项换算并格式化(meal * percent / 100).toFixed(2)再拼接$前缀返回字符串数组确保元素顺序与$N.NN格式和测试断言完全一致。掌握这道题的核心价值在于字符串格式解析 数组映射 浮点格式化是大量每日编程挑战共用的基础模式理解slice/parseFloat/toFixed/模板字符串的组合方式后同类题目如百分比换算、单位换算、金额格式化都可以直接迁移这一套路。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考