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