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