摘要：模板語法四種詞法定義二空白符號(hào)空白符號(hào)分類或稱是，是縮進(jìn)符，字符串中寫的。注意換行符會(huì)影響的兩個(gè)重要語法特性自動(dòng)插入分號(hào)和規(guī)則。

重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請(qǐng)聯(lián)系我，郵箱：kaimo313@foxmail.com。

ECMAScript 源碼文本會(huì)被從左到右掃描，并被轉(zhuǎn)換為一系列的輸入元素，包括 token、控制符、行終止符、注釋和空白符。ECMAScript 定義了一些關(guān)鍵字、字面量以及行尾分號(hào)補(bǔ)全的規(guī)則。

可以參考MDN文檔--詞法文法

WhiteSpace 空白字符

LineTerminator 換行符

Comment 注釋

Token 詞

IdentifierName 標(biāo)識(shí)符名稱：典型案例就是使用的變量名，注意這里關(guān)鍵字也包含在內(nèi)。

Punctuator 符號(hào)：使用的運(yùn)算符和大括號(hào)等符號(hào)。

NumericLiteral 數(shù)字直接量：就是寫的數(shù)字。

StringLiteral 字符串直接量：就是用單引號(hào)或者雙引號(hào)引起來的直接量。

Template 字符串模板：用反引號(hào) ` 括起來的直接量。

1、除法和正則表達(dá)式?jīng)_突問題

JavaScript 不但支持除法運(yùn)算符 / 和 /= ，還支持用斜杠括起來的正則表達(dá)式 /.../ 。

解決方案：是定義兩組詞法，然后靠語法分析傳一個(gè)標(biāo)志給詞法分析器，讓它來決定使用哪一套詞法。

2、字符串模板

理論上， ${ } 內(nèi)部可以放任何 JavaScript 表達(dá)式代碼，而這些代碼是以  }  結(jié)尾的，也就是說，這部分詞法不允許出現(xiàn)  }  運(yùn)算符。

// 
`Hello, ${world}`

3、四種詞法定義

InputElementDiv

InputElementRegExp

InputElementRegExpOrTemplateTail

InputElementTemplateTail

(或稱) 是 U+0009，是縮進(jìn) TAB 符，字符串中寫的 。

是 U+000B，也就是垂直方向的 TAB 符 v。

是 U+000C，Form Feed，分頁符，字符串直接量中寫作 f。

是 U+0020，就是最普通的空格。

是 U+00A0，非斷行空格，它是 SP 的一個(gè)變體，在文字排版中，可以避免因?yàn)榭崭裨诖颂幇l(fā)生斷行，其它方面和普通空格完全一樣。

(舊稱) 是 U+FEFF，這是 ES5 新加入的空白符，是 Unicode 中的零寬非斷行空格，在以 UTF 格式編碼的文件中，常常在文件首插入一個(gè)額外的 U+FEFF，解析 UTF 文件的程序可以根據(jù) U+FEFF 的表示方法猜測(cè)文件采用哪種 UTF 編碼方式。這個(gè)字符也叫做bit order mark。

：是 U+000A，就是最正常換行符，在字符串中的

：是 U+000D，這個(gè)字符真正意義上的回車，在字符串中是

：是 U+2028，是 Unicode 中的行分隔符。

：是 U+2029，是 Unicode 中的段落分隔符。

注意：換行符會(huì)影響 JavaScript 的兩個(gè)重要語法特性：自動(dòng)插入分號(hào) 和 no line terminator規(guī)則。

// 多行注釋
/* MultiLineCommentChars */ 

// 單行注釋
// SingleLineCommentChars

IdentifierName可以以美元符$，下劃線_或者 Unicode 字母開始，除了開始字符以外，還可以使用 Unicode 中的連接標(biāo)記、數(shù)字、以及連接符號(hào)。

關(guān)鍵字

await break case catch class const 
continue debugger default delete do else 
export extends finally for function if 
import ininstance of new return super 
switch this throw try typeof 
var void while with yield

// 為了未來使用而保留的關(guān)鍵字
enum

// 在嚴(yán)格模式下還有
implements package protected 
interface private public

NullLiteral（null）和 BooleanLiteral（true false） 也是保留字。

僅當(dāng)不是保留字的時(shí)候，IdentifierName會(huì)被解析為Identifier。

{ ( ) [ ] . ... ; , < > <= >= == != === !== 
+ - * % ** ++ -- << >> >>> & | ^ ! ~ && || 
? : = += -= *= %= **= <<= >>= >>>= &= |= 
^= => / /= }

JavaScript 規(guī)范中規(guī)定的數(shù)字直接量可以支持四種寫法：十進(jìn)制數(shù)、二進(jìn)制整數(shù)、八進(jìn)制整數(shù)和十六進(jìn)制整數(shù)。

1、十進(jìn)制的 Number 可以帶小數(shù)，小數(shù)點(diǎn)前后部分都可以省略，但是不能同時(shí)省略

.01    // 0.01
12.    // 12
12.01  // 12.01

2、12.toString() 為什么會(huì)報(bào)錯(cuò)？

12.toString()
// Uncaught SyntaxError: Invalid or unexpected token

// 原因： `12.` 會(huì)被當(dāng)做省略了小數(shù)點(diǎn)后面部分的數(shù)字而看成一個(gè)整體，相當(dāng)于執(zhí)行了12toString()，所以會(huì)報(bào)錯(cuò)

// 解決：加入空格讓其多帶帶成為一個(gè) token

12 .toString()  // "12"

// 或者加一個(gè).

12..toString()  // "12"

另外科學(xué)計(jì)數(shù)法跟進(jìn)制就不寫了。。。。

// 雙引號(hào)
" DoubleStringCharacters "

// 單引號(hào)
" SingleStringCharacters "

即一個(gè)反斜杠  后面跟一個(gè)字符這種形式。

正則表達(dá)式由 Body 和 Flags 兩部分組成

/RegularExpressionBody/g

其中 Body 部分至少有一個(gè)字符，第一個(gè)字符不能是 （因?yàn)?/ 跟多行注釋有詞法沖突）。

在 JavaScript 詞法中，包含 ${ } 的 Template，是被拆開分析的

`a${b}c$trv5d5de`

/*
// 被拆成了五個(gè)部分

`a${  //  這個(gè)被稱為模板頭
b     //  普通標(biāo)識(shí)符
}c${  //  被稱為模板中段
d     //  普通標(biāo)識(shí)符
}e`   //  被稱為模板尾

*/

模板支持添加處理函數(shù)的寫法，這時(shí)模板的各段會(huì)被拆開，傳遞給函數(shù)當(dāng)參數(shù)：

function kaimo(){
    console.log(arguments);
}

var temp = "kaimo"

kaimo`hello ${temp} !`

// [["hello ", " !"], "kaimo"]

看著這些頭都大了。。。