文檔教程前端【免費下載鏈接】zh.javascript.info現代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 規(guī)范為基準通過簡單但足夠詳細的內容為你講解從基礎到高階的 JavaScript 相關知識。項目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info點擊查看免費下載JavaScript 的運算符在求值時并非所見即所得二元會優(yōu)先拼接字符串而-、*、/等算術運算符則會把運算元強制轉換為數字。本文以現代 JavaScript 教程zh.javascript.info中基礎運算符章節(jié)的經典練習題3-primitive-conversions-questions/task.md為骨架逐題推演 14 個表達式的結果并對照官方答案解析與類型轉換章節(jié)中的轉換規(guī)則表幫你徹底掌握字符串轉換、數字轉換、null/undefined特例以及運算符優(yōu)先級這四組核心知識點。讀完本文你能準確口算出任意混合了字符串與數字的表達式結果并能在實戰(zhàn)中避開prompt取數相加這類典型陷阱。題目背景與知識前提該練習題位于 1-js/02-first-steps/08-operators/ 目錄下是基礎運算符數學運算一章的配套任務importance: 5即難度與重要性均為最高檔。它要求讀者在不運行代碼的情況下先手寫 14 個表達式的結果再與官方答案比對。要獨立完成這道題需要先掌握兩章前置知識原始類型的轉換規(guī)則07-type-conversions/article.md中的數字型轉換規(guī)則表運算符的求值行為08-operators/article.md中二元的字符串連接特性、一元的數字轉換以及運算符優(yōu)先級表。下面先速覽規(guī)則再逐題推演。三大原始類型轉換規(guī)則速覽在進行算術運算時JavaScript 會自動把運算元轉換為數字。根據類型轉換章節(jié)中的規(guī)則表數字型轉換遵循值轉換為數字的結果undefinedNaNnull0true/false1/0string去掉首尾空白空格、\n、\t等后讀取其中的數字剩余為空則得0讀取出錯則得NaN兩個最容易被記錯的特例是undefined轉數字是NaN而不是0null才是0字符串轉數字時首尾空白會被忽略因此 -9 可以轉為-9而只有空白字符的 \t \n等價于空字符串轉為0。同時要區(qū)分兩種運算符行為詳見運算符章節(jié)二元加號是唯一支持字符串連接的算術運算符只要有一個運算元是字符串另一個也會被轉為字符串然后拼接其余算術運算符-、*、/等只對數字起作用總是把運算元轉換為數字后再計算一元加號等價于Number(...)優(yōu)先級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下面按規(guī)則分組逐條拆解。第一組二元的字符串優(yōu)先規(guī)則 1 0→10有字符串參與的加法會先做字符串轉換。第一步 1把數字1轉為字符串得到1第二步1 0再次應用同一規(guī)則得到10。官方答案的注釋 (1) 指出只要任一運算元是字符串另一個也會被轉換。4 5 px→9px運算符按從左到右的順序工作同級優(yōu)先級下所以先計算4 5 9此時仍是純數字加法隨后9 px遇到字符串把9轉為9拼接得到9px。這正是運算符章節(jié)中2 2 1 41例子的翻版——結果的類型取決于運算順序。$ 4 5→$45第一個運算元就是字符串因此后續(xù)的4和5都被視為字符串參與拼接最終得到$45而不是$ 9。對照運算符章節(jié)的1 2 2 122即可理解一旦進入字符串模式整條鏈都會拼接。 -9 5→ -9 5這同樣屬于字符串拼接官方注釋 (3) 說明帶字符串的加法會將數字5加到字符串之后。注意字符串內容原樣保留包括首尾空格所以結果是帶空格的 -9 5絕不會變成-4。第二組減乘除觸發(fā)的數字轉換 - 1 0→-1減法-與加法不同它只接受數字?？兆址磾底洲D換規(guī)則變成0于是表達式等價于0 - 1 0 -1。官方注釋 (2) 特意強調減法像大多數數學運算一樣只能用于數字。true false→1這里沒有字符串二元退化為普通加法布爾值按規(guī)則轉為數字true → 1、false → 0因此1 0 1。6 / 3→2除法要求數字運算元3被轉為3得到2。運算符章節(jié)中6 / 2的例子與此同理。2 * 3→6乘法同樣把兩個字符串都轉為數字2 * 3 6。這是其他算術運算符總是轉換運算元的最直觀證據。4 - 2→24轉為數字44 - 2 2。減法沒有字符串拼接行為只做數字運算。4px - 2→NaN這是最容易踩坑的一題。字符串4px不是純數字字符串數字轉換會從4px中讀取數字讀到p時解析失敗整體結果為NaN。官方注釋 (6) 的姊妹例在類型轉換章節(jié)中也有對應說明——Number(123z)同樣得到NaN讀到z時出錯。一旦出現NaN后續(xù)算術結果永遠保持NaN。 -9 - 5→-14與上一題形成鮮明對比。 -9 去掉首尾空格后是-9是合法的數字字符串轉為-9后計算-9 - 5 -14。官方注釋 (4) 強調減法始終將字符串轉換為數字因此它會使 -9 轉換為數字-9忽略了字符串首尾的空格。第三組null、undefined與空白字符串特例null 1→1null按數字轉換規(guī)則變?yōu)?官方注釋 (5)所以0 1 1。這是null與undefined在轉換上最關鍵的差異點。undefined 1→NaNundefined轉為數字是NaN官方注釋 (6)NaN 1仍是NaN。官方答案與類型轉換章節(jié)的規(guī)則表都對此做了雙重強調因為初學者常誤以為它和null一樣是0。 \t \n - 2→-2整個字符串只包含空白字符空格、制表符\t、換行符\n。字符串轉數字時會先去掉首尾空白剩余為空字符串按規(guī)則轉為0所以0 - 2 -2。官方注釋 (7) 的表述是字符串轉換為數字時會忽略字符串的首尾處的空格字符……整個字符串由空格字符組成……類似于空字符串所以會變?yōu)?。從解析中提煉的四個記憶要點先看有沒有字符串再看運算符只要二元的任一運算元是字符串結果一定是字符串拼接而-、*、/出現時永遠走數字轉換路線。是雙面派一元做數字轉換等價Number(...)優(yōu)先級高于二元這是a b能正確求和的原因。null與undefined在數字轉換中天差地別null → 0undefined → NaN?？瞻着c非法字符字符串轉數字會忽略首尾空白純空白字符串視為0但只要混入非數字字符如4px結果就是NaN。實戰(zhàn)延伸prompt輸入相加的陷阱這 14 道題并非紙上談兵同樣的坑在真實代碼中隨時會出現。本目錄配套的練習題4-fix-prompt/task.md就展示了一個經典 buglet a prompt(First number?, 1); let b prompt(Second number?, 2); alert(a b); // 12prompt總是以字符串形式返回用戶輸入所以這里實際執(zhí)行的是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方式二正是本題目核心規(guī)則的實戰(zhàn)應用兩個一元的優(yōu)先級15都高于中間的二元12因此先完成1 → 1、2 → 2的數字轉換二元再對兩個數字求和。理解這 14 道表達式就能一眼看出這類 bug 的成因并熟練運用一元或Number(...)修復。自測與延伸閱讀建議按照原題要求先遮住答案在白紙上寫出全部 14 個表達式的結果再對照官方答案逐條核對凡是寫錯的題目回到類型轉換章節(jié)的規(guī)則表和運算符章節(jié)的優(yōu)先級表重新確認對應規(guī)則。若想進一步鞏固運算符求值直覺本目錄還提供配套練習1-increment-order自增/自減的前置與后置返回值與2-assignment-result賦值表達式也返回值。這三道題共同覆蓋了運算符返回值 類型轉換 優(yōu)先級三大求值要素吃透后即可流暢閱讀任何混合表達式代碼。贊分享文檔教程前端【免費下載鏈接】zh.javascript.info現代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 規(guī)范為基準通過簡單但足夠詳細的內容為你講解從基礎到高階的 JavaScript 相關知識。項目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info點擊查看免費下載相關推薦JavaScript 基礎類型轉換表達式逐題解析——JavaScript.info 運算符章節(jié)經典練習JavaScript 基礎類型轉換表達式逐題解析——JavaScript.info 運算符章節(jié)經典練習 本文圍繞 JavaScript.infoModern文檔/教程前端原始值類型轉換實戰(zhàn)Modern JavaScript Tutorial 運算符類型轉換練習題全解析原始值類型轉換實戰(zhàn)Modern JavaScript Tutorial 運算符類型轉換練習題全解析 本篇指南圍繞 Modern JavaScript Tuto文檔/教程前端JavaScript 比較運算符專項練習7 道經典表達式逐題解析Modern JavaScript Tutorial 實戰(zhàn)JavaScript 比較運算符專項練習7 道經典表達式逐題解析Modern JavaScript Tutorial 實戰(zhàn) 導讀 本篇技術指南圍繞 Mod文檔/教程前端上一篇5個維度帶你掌握Desktop Postflop開源德州撲克GTO求解器全指南下一篇如何通過Desktop Postflop實現德州撲克GTO策略分析從入門到精通指南創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考