重学前端学习笔记（二十七）--JavaScript的词法

jayzou 发布于2019-08-30 11:04 / 1901人阅读

摘要：模板语法四种词法定义二空白符号空白符号分类或称是，是缩进符，字符串中写的。注意换行符会影响的两个重要语法特性自动插入分号和规则。

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。

一、JavaScript 的词法（lexical grammar）

ECMAScript 源码文本会被从左到右扫描，并被转换为一系列的输入元素，包括 token、控制符、行终止符、注释和空白符。ECMAScript 定义了一些关键字、字面量以及行尾分号补全的规则。

可以参考MDN文档--词法文法

1.1、分类

WhiteSpace 空白字符

LineTerminator 换行符

Comment 注释

Token 词

IdentifierName 标识符名称：典型案例就是使用的变量名，注意这里关键字也包含在内。

Punctuator 符号：使用的运算符和大括号等符号。

NumericLiteral 数字直接量：就是写的数字。

StringLiteral 字符串直接量：就是用单引号或者双引号引起来的直接量。

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

1.2、特别之处

1、除法和正则表达式冲突问题

JavaScript 不但支持除法运算符 / 和 /= ，还支持用斜杠括起来的正则表达式 /.../ 。

解决方案：是定义两组词法，然后靠语法分析传一个标志给词法分析器，让它来决定使用哪一套词法。

2、字符串模板

理论上， ${ } 内部可以放任何 JavaScript 表达式代码，而这些代码是以  }  结尾的，也就是说，这部分词法不允许出现  }  运算符。

// 
`Hello, ${world}`

3、四种词法定义

InputElementDiv

InputElementRegExp

InputElementRegExpOrTemplateTail

InputElementTemplateTail

二、空白符号 Whitespace 2.1、空白符号分类

(或称) 是 U+0009，是缩进 TAB 符，字符串中写的。

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

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

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

是 U+00A0，非断行空格，它是 SP 的一个变体，在文字排版中，可以避免因为空格在此处发生断行，其它方面和普通空格完全一样。

(旧称) 是 U+FEFF，这是 ES5 新加入的空白符，是 Unicode 中的零宽非断行空格，在以 UTF 格式编码的文件中，常常在文件首插入一个额外的 U+FEFF，解析 UTF 文件的程序可以根据 U+FEFF 的表示方法猜测文件采用哪种 UTF 编码方式。这个字符也叫做bit order mark。

2.2、所有的 Unicode 中的空格分类

三、换行符 LineTerminator 3.1、四种换行符

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

：是 U+000D，这个字符真正意义上的回车，在字符串中是

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

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

注意：换行符会影响 JavaScript 的两个重要语法特性：自动插入分号 和 no line terminator规则。

四、注释 Comment

// 多行注释
/* MultiLineCommentChars */ 

// 单行注释
// SingleLineCommentChars

五、标识符名称 IdentifierName

IdentifierName可以以美元符$，下划线_或者 Unicode 字母开始，除了开始字符以外，还可以使用 Unicode 中的连接标记、数字、以及连接符号。

关键字

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。

六、符号 Punctuator

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

七、数字直接量 NumericLiteral

JavaScript 规范中规定的数字直接量可以支持四种写法：十进制数、二进制整数、八进制整数和十六进制整数。

1、十进制的 Number 可以带小数，小数点前后部分都可以省略，但是不能同时省略

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

2、12.toString() 为什么会报错？

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

// 原因： `12.` 会被当做省略了小数点后面部分的数字而看成一个整体，相当于执行了12toString()，所以会报错

// 解决：加入空格让其多带带成为一个 token

12 .toString()  // "12"

// 或者加一个.

12..toString()  // "12"

另外科学计数法跟进制就不写了。。。。

八、字符串直接量 StringLiteral

// 双引号
" DoubleStringCharacters "

// 单引号
" SingleStringCharacters "

8.1、单字符转义

即一个反斜杠  后面跟一个字符这种形式。

九、正则表达式直接量 RegularExpressionLiteral

正则表达式由 Body 和 Flags 两部分组成

/RegularExpressionBody/g

其中 Body 部分至少有一个字符，第一个字符不能是 （因为 / 跟多行注释有词法冲突）。

十、字符串模板 Template

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

`a${b}c${d}e`

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

`a${  //  这个被称为模板头
b     //  普通标识符
}c${  //  被称为模板中段
d     //  普通标识符
}e`   //  被称为模板尾

*/

模板支持添加处理函数的写法，这时模板的各段会被拆开，传递给函数当参数：

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

var temp = "kaimo"

kaimo`hello ${temp} !`

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

个人总结

看着这些头都大了。。。

专线服务超融合服务器二十七 javascript学习笔记学习前端的网站 javascript的学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114751.html

重学前端学习笔记（二十七）--JavaScript的词法

摘要：模板语法四种词法定义二空白符号空白符号分类或称是，是缩进符，字符串中写的。注意换行符会影响的两个重要语法特性自动插入分号和规则。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱...

shuibo 2019-08-05 17:09 评论0 收藏0
重学前端学习笔记（二十七）--JavaScript的词法

摘要：模板语法四种词法定义二空白符号空白符号分类或称是，是缩进符，字符串中写的。注意换行符会影响的两个重要语法特性自动插入分号和规则。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱...

Hegel_Gu 2019-08-02 15:11 评论0 收藏0
重学前端学习笔记（二十七）--JavaScript的词法

摘要：模板语法四种词法定义二空白符号空白符号分类或称是，是缩进符，字符串中写的。注意换行符会影响的两个重要语法特性自动插入分号和规则。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱...

MageekChiu 2019-08-23 17:55 评论0 收藏0
重学前端学习笔记（二十八）--通过四则运算的解释器快速理解编译原理

摘要：实现状态机可能产生四种输入元素，其中只有两种，状态机的第一个状态就是根据第一个输入字符来判断进入了哪种状态用函数表示状态，用表示状态的迁移关系，用值表示下一个状态。运行状态机输出结果四语法分析语法分析根据每一个产生式来写一个函数。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点...

Crazy_Coder 2019-08-30 11:06 评论0 收藏0
重学前端学习笔记（二十八）--通过四则运算的解释器快速理解编译原理

摘要：实现状态机可能产生四种输入元素，其中只有两种，状态机的第一个状态就是根据第一个输入字符来判断进入了哪种状态用函数表示状态，用表示状态的迁移关系，用值表示下一个状态。运行状态机输出结果四语法分析语法分析根据每一个产生式来写一个函数。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点...

余学文 2019-08-05 17:12 评论0 收藏0