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

2019年9月1日 158次阅读 来源: 凯小默

笔记申明

重学前端是程劭非（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、空缺标记分类

  • <HT>(或称<TAB>) 是 U+0009，是缩进 TAB 符，字符串中写的 \t 。
  • <VT>是 U+000B，也就是垂直方向的 TAB 符 \v。
  • <FF>是 U+000C，Form Feed，分页符，字符串直接量中写作 \f。
  • <SP>是 U+0020，就是最一般的空格。
  • <NBSP>是 U+00A0，非断行空格，它是 SP 的一个变体，在笔墨排版中，能够防止由于空格在此处发作断行，别的方面和一般空格完整一样。
  • <ZWNBSP>(旧称<BOM>) 是 U+FEFF，这是 ES5 新到场的空缺符，是 Unicode 中的零宽非断行空格，在以 UTF 花样编码的文件中，常常在文件首插进去一个分外的 U+FEFF，剖析 UTF 文件的顺序能够依据 U+FEFF 的示意要领猜想文件采纳哪一种 UTF 编码体式格局。这个字符也叫做bit order mark。

2.2、一切的 Unicode 中的空格分类

《重学前端进修笔记（二十七）--JavaScript的词法》

三、换行符 LineTerminator

3.1、四种换行符

  • <LF>：是 U+000A，就是最一般换行符，在字符串中的 \n
  • <CR>：是 U+000D，这个字符真正意义上的回车，在字符串中是 \r
  • <LS>：是 U+2028，是 Unicode 中的行分隔符。
  • <PS>：是 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、单字符转义

即一个反斜杠
\ 背面跟一个字符这类情势。

《重学前端进修笔记（二十七）--JavaScript的词法》

九、正则表达式直接量 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"]

个人总结

看着这些头都大了。。。

    原文作者：凯小默
    原文地址: https://segmentfault.com/a/1190000019367533
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞