文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载JavaScript 的运算符在求值时并非所见即所得二元会优先拼接字符串而-、*、/等算术运算符则会把运算元强制转换为数字。本文以现代 JavaScript 教程zh.javascript.info中基础运算符章节的经典练习题3-primitive-conversions-questions/task.md为骨架逐题推演 14 个表达式的结果并对照官方答案解析与类型转换章节中的转换规则表帮你彻底掌握字符串转换、数字转换、null/undefined特例以及运算符优先级这四组核心知识点。读完本文你能准确口算出任意混合了字符串与数字的表达式结果并能在实战中避开prompt取数相加这类典型陷阱。题目背景与知识前提该练习题位于 1-js/02-first-steps/08-operators/ 目录下是基础运算符数学运算一章的配套任务importance: 5即难度与重要性均为最高档。它要求读者在不运行代码的情况下先手写 14 个表达式的结果再与官方答案比对。要独立完成这道题需要先掌握两章前置知识原始类型的转换规则07-type-conversions/article.md中的数字型转换规则表运算符的求值行为08-operators/article.md中二元的字符串连接特性、一元的数字转换以及运算符优先级表。下面先速览规则再逐题推演。三大原始类型转换规则速览在进行算术运算时JavaScript 会自动把运算元转换为数字。根据类型转换章节中的规则表数字型转换遵循值转换为数字的结果undefinedNaNnull0true/false1/0string去掉首尾空白空格、\n、\t等后读取其中的数字剩余为空则得0读取出错则得NaN两个最容易被记错的特例是undefined转数字是NaN而不是0null才是0字符串转数字时首尾空白会被忽略因此 -9 可以转为-9而只有空白字符的 \t \n等价于空字符串转为0。同时要区分两种运算符行为详见运算符章节二元加号是唯一支持字符串连接的算术运算符只要有一个运算元是字符串另一个也会被转为字符串然后拼接其余算术运算符-、*、/等只对数字起作用总是把运算元转换为数字后再计算一元加号等价于Number(...)优先级15高于二元加号12所以a b中先各自转数字、再求和。14 道表达式逐题推演原始题目与答案代码如下no-beautify表示刻意保留紧凑格式以便对比 1 0 // 10 - 1 0 // -1 true false // 1 6 / 3 // 2 2 * 3 // 6 4 5 px // 9px $ 4 5 // $45 4 - 2 // 2 4px - 2 // NaN -9 5 // -9 5 -9 - 5 // -14 null 1 // 1 undefined 1 // NaN \t \n - 2 // -2下面按规则分组逐条拆解。第一组二元的字符串优先规则 1 0→10有字符串参与的加法会先做字符串转换。第一步 1把数字1转为字符串得到1第二步1 0再次应用同一规则得到10。官方答案的注释 (1) 指出只要任一运算元是字符串另一个也会被转换。4 5 px→9px运算符按从左到右的顺序工作同级优先级下所以先计算4 5 9此时仍是纯数字加法随后9 px遇到字符串把9转为9拼接得到9px。这正是运算符章节中2 2 1 41例子的翻版——结果的类型取决于运算顺序。$ 4 5→$45第一个运算元就是字符串因此后续的4和5都被视为字符串参与拼接最终得到$45而不是$ 9。对照运算符章节的1 2 2 122即可理解一旦进入字符串模式整条链都会拼接。 -9 5→ -9 5这同样属于字符串拼接官方注释 (3) 说明带字符串的加法会将数字5加到字符串之后。注意字符串内容原样保留包括首尾空格所以结果是带空格的 -9 5绝不会变成-4。第二组减乘除触发的数字转换 - 1 0→-1减法-与加法不同它只接受数字。空字符串按数字转换规则变成0于是表达式等价于0 - 1 0 -1。官方注释 (2) 特意强调减法像大多数数学运算一样只能用于数字。true false→1这里没有字符串二元退化为普通加法布尔值按规则转为数字true → 1、false → 0因此1 0 1。6 / 3→2除法要求数字运算元3被转为3得到2。运算符章节中6 / 2的例子与此同理。2 * 3→6乘法同样把两个字符串都转为数字2 * 3 6。这是其他算术运算符总是转换运算元的最直观证据。4 - 2→24转为数字44 - 2 2。减法没有字符串拼接行为只做数字运算。4px - 2→NaN这是最容易踩坑的一题。字符串4px不是纯数字字符串数字转换会从4px中读取数字读到p时解析失败整体结果为NaN。官方注释 (6) 的姊妹例在类型转换章节中也有对应说明——Number(123z)同样得到NaN读到z时出错。一旦出现NaN后续算术结果永远保持NaN。 -9 - 5→-14与上一题形成鲜明对比。 -9 去掉首尾空格后是-9是合法的数字字符串转为-9后计算-9 - 5 -14。官方注释 (4) 强调减法始终将字符串转换为数字因此它会使 -9 转换为数字-9忽略了字符串首尾的空格。第三组null、undefined与空白字符串特例null 1→1null按数字转换规则变为0官方注释 (5)所以0 1 1。这是null与undefined在转换上最关键的差异点。undefined 1→NaNundefined转为数字是NaN官方注释 (6)NaN 1仍是NaN。官方答案与类型转换章节的规则表都对此做了双重强调因为初学者常误以为它和null一样是0。 \t \n - 2→-2整个字符串只包含空白字符空格、制表符\t、换行符\n。字符串转数字时会先去掉首尾空白剩余为空字符串按规则转为0所以0 - 2 -2。官方注释 (7) 的表述是字符串转换为数字时会忽略字符串的首尾处的空格字符……整个字符串由空格字符组成……类似于空字符串所以会变为0。从解析中提炼的四个记忆要点先看有没有字符串再看运算符只要二元的任一运算元是字符串结果一定是字符串拼接而-、*、/出现时永远走数字转换路线。是双面派一元做数字转换等价Number(...)优先级高于二元这是a b能正确求和的原因。null与undefined在数字转换中天差地别null → 0undefined → NaN。空白与非法字符字符串转数字会忽略首尾空白纯空白字符串视为0但只要混入非数字字符如4px结果就是NaN。实战延伸prompt输入相加的陷阱这 14 道题并非纸上谈兵同样的坑在真实代码中随时会出现。本目录配套的练习题4-fix-prompt/task.md就展示了一个经典 buglet a prompt(First number?, 1); let b prompt(Second number?, 2); alert(a b); // 12prompt总是以字符串形式返回用户输入所以这里实际执行的是1 2二元走了字符串拼接路线输出12而非3。官方解答给出了两种修正方式// 方式一在 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方式二正是本题目核心规则的实战应用两个一元的优先级15都高于中间的二元12因此先完成1 → 1、2 → 2的数字转换二元再对两个数字求和。理解这 14 道表达式就能一眼看出这类 bug 的成因并熟练运用一元或Number(...)修复。自测与延伸阅读建议按照原题要求先遮住答案在白纸上写出全部 14 个表达式的结果再对照官方答案逐条核对凡是写错的题目回到类型转换章节的规则表和运算符章节的优先级表重新确认对应规则。若想进一步巩固运算符求值直觉本目录还提供配套练习1-increment-order自增/自减的前置与后置返回值与2-assignment-result赋值表达式也返回值。这三道题共同覆盖了运算符返回值 类型转换 优先级三大求值要素吃透后即可流畅阅读任何混合表达式代码。赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐JavaScript 基础类型转换表达式逐题解析——JavaScript.info 运算符章节经典练习JavaScript 基础类型转换表达式逐题解析——JavaScript.info 运算符章节经典练习 本文围绕 JavaScript.infoModern文档/教程前端原始值类型转换实战Modern JavaScript Tutorial 运算符类型转换练习题全解析原始值类型转换实战Modern JavaScript Tutorial 运算符类型转换练习题全解析 本篇指南围绕 Modern JavaScript Tuto文档/教程前端JavaScript 比较运算符专项练习7 道经典表达式逐题解析Modern JavaScript Tutorial 实战JavaScript 比较运算符专项练习7 道经典表达式逐题解析Modern JavaScript Tutorial 实战 导读 本篇技术指南围绕 Mod文档/教程前端上一篇5个维度带你掌握Desktop Postflop开源德州扑克GTO求解器全指南下一篇如何通过Desktop Postflop实现德州扑克GTO策略分析从入门到精通指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考