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

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯(lián)系我，郵箱：[email protected]。

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

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

WhiteSpace 空白字符

LineTerminator 換行符

Comment 注釋

Token 詞

IdentifierName 標識符名稱：典型案例就是使用的變量名，注意這里關鍵字也包含在內。

Punctuator 符號：使用的運算符和大括號等符號。

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

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

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

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

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

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

2、字符串模板

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

// 
`Hello, ${world}`

3、四種詞法定義

InputElementDiv

InputElementRegExp

InputElementRegExpOrTemplateTail

InputElementTemplateTail

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

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

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

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

是 U+00A0，非斷行空格，它是 SP 的一個變體，在文字排版中，可以避免因為空格在此處發(fā)生斷行，其它方面和普通空格完全一樣。

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

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

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

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

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

注意：換行符會影響 JavaScript 的兩個重要語法特性：自動插入分號 和 no line terminator規(guī)則。

// 多行注釋
/* MultiLineCommentChars */ 

// 單行注釋
// SingleLineCommentChars

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

關鍵字

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

// 為了未來使用而保留的關鍵字
enum

// 在嚴格模式下還有
implements package protected 
interface private public

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

僅當不是保留字的時候，IdentifierName會被解析為Identifier。

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

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

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

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

2、12.toString() 為什么會報錯？

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

// 原因： `12.` 會被當做省略了小數(shù)點后面部分的數(shù)字而看成一個整體，相當于執(zhí)行了12toString()，所以會報錯

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

12 .toString()  // "12"

// 或者加一個.

12..toString()  // "12"

另外科學計數(shù)法跟進制就不寫了。。。。

// 雙引號
" DoubleStringCharacters "

// 單引號
" SingleStringCharacters "

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

正則表達式由 Body 和 Flags 兩部分組成

/RegularExpressionBody/g

其中 Body 部分至少有一個字符，第一個字符不能是 （因為 / 跟多行注釋有詞法沖突）。

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

`a$c$qoyqs8suu2ue`

/*
// 被拆成了五個部分

`a${  //  這個被稱為模板頭
b     //  普通標識符
}c${  //  被稱為模板中段
d     //  普通標識符
}e`   //  被稱為模板尾

*/

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

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

var temp = "kaimo"

kaimo`hello ${temp} !`

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

看著這些頭都大了。。。