文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本文围绕 JavaScript.infoModern JavaScript Tutorial仓库中「基本运算符」章节的经典练习任务展开对 13 个混合了字符串、数字、布尔值与特殊值null、undefined、空白字符的表达式逐一推导其求值结果。读完本文你将彻底掌握 JavaScript 中二元的字符串拼接与其余算术运算符的隐式数值转换这两条核心规则并能解释 -9 5与 -9 - 5为何结果截然不同以及undefined 1为什么会得到NaN。该练习任务的题目原文位于 task.md官方参考答案与逐步推导位于 solution.md。建议读者先凭直觉写出答案再对照推导过程检查自己的类型心智模型是否准确。前置知识两个决定一切的规则在逐题解析前先回顾 运算符章节 与 类型转换章节 中与本练习直接相关的三条规则它们是解答全部 13 个表达式的钥匙。规则一二元遇到字符串就拼接通常二元用于数字求和但只要任意一个操作数是字符串二元就会把另一个操作数也转换为字符串然后执行拼接见 运算符章节的 String concatenation with binary alert(1 2); // 12 alert(2 1); // 21 alert(2 2 1); // 41先算 224再拼接 1 alert(1 2 2); // 122第一个操作数是字符串后续全部按拼接处理关键在于运算符从左到右逐个执行2 2 1中前一个两侧都是数字先得到4再遇到字符串1才转为拼接而1 2 2从第一步起就进入字符串模式。规则二其他算术运算符只认数字二元是唯一支持字符串的算术运算符。-、*、/、%等始终把操作数转换成数字后再计算alert(6 - 2); // 42 被转成数字 2 alert(6 / 2); // 3两侧都被转成数字这正是本练习中大量表达式 - 1、4 - 2、 -9 - 5能够得出数字结果的根源。规则三数值转换的查表规则字符串被转为数字时首尾的空白字符空格、\t制表符、\n换行等会被移除剩余字符串为空则得到0否则按数字读取读取失败则得到NaN。而null转数字为0undefined转数字为NaN完整规则表见 类型转换章节的 Numeric Conversion值转数字结果undefinedNaNnull0true/false1/0字符串去除首尾空白后空串 →0合法数字 → 该数字读取失败 →NaN全部 13 个表达式的结果速查先给出完整答案清单随后逐题拆解#表达式结果类型1 1 010字符串2 - 1 0-1数字3true false1数字46 / 32数字52 * 36数字64 5 px9px字符串7$ 4 5$45字符串84 - 22数字94px - 2NaN数字10 -9 5 -9 5字符串11 -9 - 5-14数字12null 11数字13undefined 1NaN数字14 \t \n - 2-2数字逐题推导每条规则如何生效1. 1 0→10空字符串是字符串二元进入拼接模式 1 1随后1 0继续拼接得到10。结果是字符串不是数字 10。2. - 1 0→-1减号-只做数值运算空字符串转数字为00 - 1 -1再-1 0 -1。注意与第 1 题的对比同样是空字符串遇到走拼接遇到-走数值转换。3.true false→1布尔值转数字true → 1、false → 0二者相加得1。4.6 / 3→2除法只认数字3被转成36 / 3 2。5.2 * 3→6乘法同理两侧字符串都转为数字2 * 3 6。这里没有出现任何字符串因为*不支持拼接。6.4 5 px→9px从左到右执行4 5 9数字随后9 px因出现字符串转为拼接得到9px。7.$ 4 5→$45第一个操作数就是字符串从第一步起进入拼接模式$ 4 $4$4 5 $45。注意不是$9——字符串模式一旦开启后续所有都是拼接。8.4 - 2→2减号把4转为数字44 - 2 2。9.4px - 2→NaN4px不是合法数字读取到p处失败转数字得到NaN任何数与NaN运算的结果都是NaN。这是最容易写错的一题字符串中只要混入非数字字符整个数值转换就失败。10. -9 5→ -9 5有字符串操作数二元直接拼接不做任何数值转换、不裁剪空白数字5原样追加到字符串末尾。结果保留了字符串中的全部空格。11. -9 - 5→-14减号强制数值转换 -9 去除首尾空格后读出-9-9 - 5 -14。对比第 10 题同一个字符串在下保留空白、在-下被裁剪并转成负数——这是本练习最具对比价值的一对表达式。12.null 1→1null转数字为00 1 1。二元的操作数里没有字符串因此这里走的是数值相加。13.undefined 1→NaNundefined转数字为NaNNaN 1 NaN。务必记住undefined转数字不是0而是NaN——这与null的行为截然不同是 类型转换章节 特意强调的常见易错点。14. \t \n - 2→-2字符串由制表符\t、换行符\n和普通空格组成去除首尾空白后是空串按规则转数字为00 - 2 -2。空白字符在数值转换时被完全忽略因此全空白字符串等价于空字符串。进阶运算符优先级如何影响结果细心的读者会发现第 6、7 题的推导其实还隐含了运算符优先级。根据 运算符章节的优先级表一元优先级 14高于乘法/除法12更高于二元加法/减法11。优先级相同时从左到右执行。本练习中所有/-优先级相同且都是二元形式因此一律按从左到右的顺序求值——这正是第 6 题必须先算4 5再拼接px的原因。同一优先级机制还解释了为何apples oranges能正确求和两个一元先执行优先级 14把字符串转成数字然后二元优先级 11再相加。一元等价于简短的Number(...)可参考 运算符章节的 Numeric conversion, unary 。实战检验修复 prompt 求和的经典 Bug本练习的类型规则在真实开发中有一个教科书级的应用场景——仓库同章节的另一个任务「Fix the addition」prompt返回的永远是字符串所以两个输入相加时二元走拼接1 2得到12而非3。官方解答见 solution.md给出了两种修复方式// 方式一在 prompt 处用一元 提前转成数字 let a prompt(First number?, 1); let b prompt(Second number?, 2); alert(a b); // 3 // 方式二在 alert 中同时使用一元 和二元 let a prompt(First number?, 1); let b prompt(Second number?, 2); alert(a b); // 3方式二之所以有效正是本练习反复强调的两条规则共同作用一元先把a、b各自转成数字随后二元对两个数字求和——此时的不再是拼接而是加法。总结一张自查清单完成本练习后请确保你的类型直觉与以下结论一致二元的拼接开关只要一侧是字符串就拼接-、*、/则一律转数字。拼接不裁剪空白 -9 5保留全部空格只有数值转换才会忽略首尾空白。null → 0undefined → NaN两者转数字行为不同这是最常见的记忆误区。非法数字字符串 →NaN4px、123z这类字符串无法完整读出数字转换即失败。表达式从左到右求值4 5 px先算数字和$ 4 5全程拼接。对照本练习的题目原文 task.md 与官方逐步解答 solution.md 再次自查并可通过 类型转换章节 的完整规则表巩固记忆。当你能在不运行代码的情况下准确预测全部 14 个表达式的结果时JavaScript 的隐式类型转换对你而言就不再是玄学。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐TiXL 浮点转换运算符详解ComposeVec3FromList 与列表类型转换TiXL 浮点转换运算符详解ComposeVec3FromList 与列表类型转换 本指南深入解析 TiXL 运算符库 Lib.numbers.floats.音视频图形学桌面应用深入解析 JavaScript 赋值表达式的返回值拆解 Assignment result 练习题中的 、* 与运算符优先级深入解析 JavaScript 赋值表达式的返回值拆解 Assignment result 练习题中的 、 与运算符优先级 导读 本篇文章以 Mo文档/教程前端freeCodeCamp 基础 JavaScript 挑战深度解读Comparison with the Equality Operator相等运算符 与类型强制转换freeCodeCamp 基础 JavaScript 挑战深度解读Comparison with the Equality Operator相等运算符 前端后端教育上一篇DocSearch样式定制终极教程打造完美匹配你品牌的设计下一篇口袋AI项目使用与启动教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考