diff options
Diffstat (limited to 'files/zh-cn/web/javascript/reference/lexical_grammar/index.html')
| -rw-r--r-- | files/zh-cn/web/javascript/reference/lexical_grammar/index.html | 572 |
1 files changed, 572 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/reference/lexical_grammar/index.html b/files/zh-cn/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..c862bf1e70 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,572 @@ +--- +title: 词法文法 +slug: Web/JavaScript/Reference/Lexical_grammar +tags: + - JavaScript + - Keyword + - Literal + - 关键字 + - 字面量 + - 直接量 + - 词法 + - 语法 +translation_of: Web/JavaScript/Reference/Lexical_grammar +--- +<div>{{JsSidebar("More")}}</div> + +<p>这部分描述了JavaScript 的词法（lexical grammar）。ECMAScript 源码文本会被从左到右扫描，并被转换为一系列的输入元素，包括 token、控制符、行终止符、注释和空白符。ECMAScript 定义了一些关键字、字面量以及行尾分号补全的规则。</p> + +<h2 id="格式控制符">格式控制符</h2> + +<p>格式控制符用于控制对源码文本的解释，但是并不会显示出来。</p> + +<table class="standard-table"> + <caption>使用 Unicode 编码表示的格式控制符</caption> + <tbody> + <tr> + <th>代码点</th> + <th>名称</th> + <th>缩写</th> + <th>说明</th> + </tr> + <tr> + <td><code>U+200C</code></td> + <td>零宽度非结合子</td> + <td><ZWNJ></td> + <td>放置在一些经常会被当成连字的字符之间，用于将它们分别以独立形式显示（<a href="http://en.wikipedia.org/wiki/Zero-width_non-joiner">Wikipedia</a>）</td> + </tr> + <tr> + <td><code>U+200D</code></td> + <td>零宽度结合子</td> + <td><ZWJ></td> + <td>放置在一些通常不会被标记为连字的字符之间，用于将这些字符以连字形式显示（<a href="http://en.wikipedia.org/wiki/Zero-width_joiner">Wikipedia</a>）</td> + </tr> + <tr> + <td><code>U+FEFF</code></td> + <td>字节流方向标识</td> + <td><BOM></td> + <td>在脚本开头使用，除了将脚本标记为Unicode格式以外，还用来标记文本的字节流方向（<a href="http://en.wikipedia.org/wiki/Byte_order_mark">Wikipedia</a>）</td> + </tr> + </tbody> +</table> + +<h2 id="空白符">空白符</h2> + +<p>空白符提升了源码的可读性，并将标记 (tokens) 区分开。这些符号通常不影响源码的功能。通常可以用<a href="http://en.wikipedia.org/wiki/Minification_%28programming%29">压缩器</a>来移除源码中的空白，减少数据传输量。</p> + +<table class="standard-table"> + <caption>空白符</caption> + <tbody> + <tr> + <th>代码点</th> + <th>名称</th> + <th>缩写</th> + <th>说明</th> + <th>转义序列</th> + </tr> + <tr> + <td>U+0009</td> + <td>制表符</td> + <td><HT></td> + <td>水平制表符</td> + <td>\t</td> + </tr> + <tr> + <td>U+000B</td> + <td>垂直制表符</td> + <td><VT></td> + <td>垂直制表符</td> + <td>\v</td> + </tr> + <tr> + <td>U+000C</td> + <td>分页符</td> + <td><FF></td> + <td>分页符（<a href="http://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipedia</a>）</td> + <td>\f</td> + </tr> + <tr> + <td>U+0020</td> + <td>空格</td> + <td><SP></td> + <td>空格</td> + <td></td> + </tr> + <tr> + <td>U+00A0</td> + <td>无间断空格</td> + <td><NBSP></td> + <td>在该空格处不会换行</td> + <td></td> + </tr> + <tr> + <td>Others</td> + <td>其他 Unicode 空白</td> + <td><USP></td> + <td><a href="http://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_in_Unicode">Wikipedia上对 Unicode 空白的介绍</a></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="行终止符">行终止符</h2> + +<p>除了空白符之外，行终止符也可以提高源码的可读性。不同的是，行终止符可以影响 JavaScript 代码的执行。行终止符也会影响<a href="#Automatic_semicolon_insertion">自动分号补全</a>的执行。在<a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">正则表达式</a>中，行终止符会被 <strong>\s</strong> 匹配。</p> + +<p>在 ECMAScript 中，只有下列 Unicode 字符会被当成行终止符，其他的行终止符（比如 Next Line、NEL、U+0085 等）都会被当成空白符。</p> + +<table class="standard-table"> + <caption>行终止符</caption> + <tbody> + <tr> + <th>编码</th> + <th>名称</th> + <th>缩写</th> + <th>说明</th> + <th>转义序列</th> + </tr> + <tr> + <td>U+000A</td> + <td>换行符</td> + <td><LF></td> + <td>在UNIX系统中起新行</td> + <td>\n</td> + </tr> + <tr> + <td>U+000D</td> + <td>回车符</td> + <td><CR></td> + <td>在 Commodore 和早期的 Mac 系统中起新行</td> + <td>\r</td> + </tr> + <tr> + <td>U+2028</td> + <td>行分隔符</td> + <td><LS></td> + <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td> + <td></td> + </tr> + <tr> + <td>U+2029</td> + <td>段分隔符</td> + <td><PS></td> + <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="注释">注释</h2> + +<p>注释用来在源码中增加提示、笔记、建议、警告等信息，可以帮助阅读和理解源码。在调试时，可以用来将一段代码屏蔽掉，防止其运行。</p> + +<p>在 JavaScript 中，有两种添加注释的方法。</p> + +<p>第一种是<strong>单行注释（</strong>single-line comment），使用 <code>//</code>，会将该行中符号以后的文本都视为注释：</p> + +<pre class="brush: js">function comment() { + // 这是单行注释 + console.log("Hello world!"); +} +comment(); +</pre> + +<p>第二种是<strong>多行注释（</strong>multiple-line comment），使用 <code>/* */</code> ，这种方式更加灵活：</p> + +<p>比如，可以在单行内使用多行注释：</p> + +<pre class="brush: js">function comment() { + /* 单行注释 */ + console.log("Hello world!"); +} +comment();</pre> + +<p>也可以用来实现多行注释：</p> + +<pre class="brush: js">function comment() { + /* 多行注释， + 直到终止符号才结束 */ + console.log("Hello world!"); +} +comment();</pre> + +<p>多行注释也可以用于行内注释，但这样会使代码可读性变差，所以要谨慎使用：</p> + +<pre class="brush: js">function comment(x) { + console.log("Hello " + x /* 引入x的值 */ + " !"); +} +comment("world");</pre> + +<p>另外，块注释也可以用来屏蔽一段代码，只要将这段代码用块注释包裹起来就可以了：</p> + +<pre class="brush: js">function comment() { + /* console.log("Hello world!"); */ +} +comment();</pre> + +<p>注释中的 <code>console.log()</code> 的调用始终无效。这种方式可以屏蔽任意多行的代码，也可以屏蔽一行代码的一部分。</p> + +<h2 id="Hashbang_注释">Hashbang 注释</h2> + +<p>专门的第三个注释语法，<strong>hashbang 注释</strong>正在 ECMAScript 中标准化（参见 <a href="https://github.com/tc39/proposal-hashbang">Hashbang 语法建议</a>）。</p> + +<p>Hashbang 注释的行为与单行（<code>//</code>）注释完全相同，但它以 <code>#!</code> 开头且<strong>仅在脚本或模块的绝对开头有效</strong>。还要注意，在 <code>#!</code> 之前不允许有任何类型的空格。注释由 <code>#!</code> 之后的所有字符组成直到第一行的末尾；只允许有一条这样的注释。</p> + +<p>Hashbang 注释指定特定 JavaScript 解释器的路径要用于执行脚本。示例如下：</p> + +<pre class="brush: js">#!/usr/bin/env node + +console.log("Hello world"); +</pre> + +<div class="blockIndicator note"> +<p><strong>注意</strong>：JavaScript 中的 hashbang 注释模仿 <a href="https://en.wikipedia.org/wiki/Shebang_(Unix)">Unix 中的 shebangs</a>，用于指定适当的解释器运行文件。</p> +</div> + +<div class="blockIndicator warning"> +<p>尽管在 hashbang 注释之前的 <a href="https://en.wikipedia.org/wiki/Byte_order_mark">BOM</a> 在浏览器中能工作，但不建议在具有 hashbang 的脚本中使用 BOM。当您尝试在 Unix/Linux 中运行脚本时，有 BOM 将不工作。因此，如果要直接从 shell 运行脚本，请使用没有 BOM 的 UTF-8。</p> +</div> + +<p>您只能使用 <code>#!</code> 注释样式以指定 JavaScript 解释器。在所有其他情况下，只需使用 <code>//</code> 注释（或多行注释）。</p> + +<h2 id="关键字">关键字</h2> + +<h3 id="ECMAScript_6_中的保留关键字">ECMAScript 6 中的保留关键字</h3> + +<div class="threecolumns"> +<ul> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/switch", "case")}}</li> + <li>{{jsxref("Statements/try...catch", "catch")}}</li> + <li>{{jsxref("Statements/class", "class")}}</li> + <li>{{jsxref("Statements/const", "const")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/debugger", "debugger")}}</li> + <li>{{jsxref("Statements/default", "default")}}</li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Statements/do...while", "do")}}</li> + <li>{{jsxref("Statements/if...else", "else")}}</li> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/class", "extends")}}</li> + <li>{{jsxref("Statements/try...catch", "finally")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li>{{jsxref("Statements/function", "function")}}</li> + <li>{{jsxref("Statements/if...else", "if")}}</li> + <li>{{jsxref("Statements/import", "import")}}</li> + <li>{{jsxref("Operators/in", "in")}}</li> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> + <li>{{jsxref("Operators/new", "new")}}</li> + <li>{{jsxref("Statements/return", "return")}}</li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> + <li>{{jsxref("Operators/this", "this")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> + <li>{{jsxref("Statements/try...catch", "try")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li>{{jsxref("Statements/var", "var")}}</li> + <li>{{jsxref("Operators/void", "void")}}</li> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/with", "with")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li></li> +</ul> +</div> + +<h3 id="未来保留关键字">未来保留关键字</h3> + +<p>在 ECMAScript 规格中，这些关键字被当成关键字保留。目前它们没有特殊功能，但是在未来某个时间可能会加上。所以这些关键字不能当成标识符使用。这些关键字在严格模式和非严格模式中均不能使用。</p> + +<ul> + <li><code>enum</code></li> +</ul> + +<p>以下关键字只在严格模式中被当成保留关键字：</p> + +<div class="threecolumns"> +<ul> + <li><code>implements</code></li> + <li><code>interface</code></li> + <li>{{jsxref("Statements/let", "let")}}</li> + <li><code>package</code></li> + <li><code>private</code></li> + <li><code>protected</code></li> + <li><code>public</code></li> + <li><code>static</code></li> +</ul> +</div> + + + +<p>以下关键字只在模块代码中被当成保留关键字：</p> + +<ul> + <li><code>await</code></li> +</ul> + +<h4 id="之前标准中的保留关键字">之前标准中的保留关键字</h4> + +<p>这里是之前版本中的ECMAScript（1到3）中的保留关键字：</p> + +<div class="threecolumns"> +<ul> + <li><code>abstract</code></li> + <li><code>boolean</code></li> + <li><code>byte</code></li> + <li><code>char</code></li> + <li><code>double</code></li> + <li><code>final</code></li> + <li><code>float</code></li> + <li><code>goto</code></li> + <li><code>int</code></li> + <li><code>long</code></li> + <li><code>native</code></li> + <li><code>short</code></li> + <li><code>synchronized</code></li> + <li><code>transient</code></li> + <li><code>volatile</code></li> +</ul> +</div> + +<p>另外，直接量<code>null</code>、<code>true</code>和<code>false</code>同样不能被当成标识使用。</p> + +<h3 id="保留字的使用">保留字的使用</h3> + +<p>事实上保留字是仅针对标识符（Identifier）的文法定义而言的（而不是标识符名（IdentifierName）的文法定义）。如 <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a>中所描述的, 这些都是不排斥保留字的标识符名.</p> + +<pre class="brush: js">a.import +a["import"] +a = { import: "test" }. +</pre> + +<p>另一方面，如下用法是不允许的。因为它是一个标识符，而标识符的文法定义是除保留字以外的标识符名。标识符用于函数声明式和函数表达式.</p> + +<pre class="brush: js">function import() {} // Illegal.</pre> + +<h2 id="直接量">直接量</h2> + +<h3 id="空直接量">空直接量</h3> + +<p><code>更多信息可以参考<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code></p> + +<pre class="brush: js">null</pre> + +<h3 id="布尔直接量">布尔直接量</h3> + +<p>更多信息可以参考<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a></p> + +<pre class="brush: js">true +false</pre> + +<h3 id="数值直接量">数值直接量</h3> + +<h4 id="十进制">十进制</h4> + +<pre class="brush: js">1234567890 +42 + +// 谨慎使用 0 开头的数值： +0888 // 转换为十进制 888 +0777 // 转换为八进制 777，十进制 511 +</pre> + +<p>请注意，十进制数值直接量可以以 0 开头，但是如果 0 以后的最高位比 8 小，数值将会被认为是八进制而不会报错。更多信息可以参考 {{bug(957513)}} 和 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt#Octal_interpretations_with_no_radix"><code>parseInt()</code></a>。</p> + +<h4 id="二进制">二进制</h4> + +<p>二进制表示为开头是0后接大写或小写的B（<code>0b</code>或者<code>0B</code>）。这是ECMAScript 6中的新语法，可以参考下面的浏览器兼容性表格。如果<code>0b</code>之后有除了0或1以外的数字，将会抛出<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>：“Missing binary digits after 0b”。</p> + +<pre class="brush: js">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 +var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 +var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> + +<h4 id="八进制">八进制</h4> + +<p>八进制表示为开头是0后接大写或小写的O（<code>0o</code>或<code>0O</code>）。这是ECMAScript 6中的新语法，可以参考下面的浏览器兼容性表格。如果有不在（01234567）中的数字，将会抛出<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>：“Missing octal digits after 0o”。</p> + +<pre class="brush: js">var n = 0O755; // 493 +var m = 0o644; // 420 + +// 用0开头也可以实现（请查看上方十进制有关部分） +0755 +0644 +</pre> + +<h4 id="十六进制">十六进制</h4> + +<p>十六进制表示为开头是0后接大写或小写的X（<code>0x</code>或<code>0X</code>）。如果有不在（0123456789ABCDEF）中的数字，将会抛出<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>：“Identifier starts immediately after numeric literal”。</p> + +<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 +0x123456789ABCDEF // 81985529216486900 +0XA // 10 +</pre> + +<h3 id="对象直接量">对象直接量</h3> + +<p>更多信息可以参考 {{jsxref("Object")}} 和<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">对象初始化器</a>。</p> + +<pre class="brush: js">var o = { a: "foo", b: "bar", c: 42 }; + +// ES6中的简略表示方法 +var a = "foo", b = "bar", c = 42; +var o = {a, b, c}; +// 不需要这样 +var o = { a: a, b: b, c: c }; +</pre> + +<h3 id="数组直接量">数组直接量</h3> + +<p>更多信息可以参考 {{jsxref("Array")}}。</p> + +<pre class="brush: js">[1954, 1974, 1990, 2014]</pre> + +<h3 id="字符串直接量">字符串直接量</h3> + +<pre class="brush: js">'foo' +"bar"</pre> + +<h4 id="十六进制转义序列">十六进制转义序列</h4> + +<pre class="brush: js">'\xA9' // "©" +</pre> + +<h4 id="Unicode_转义序列">Unicode 转义序列</h4> + +<p>Unicode 转义序列要求在<code>\u</code>之后至少有四个字符。</p> + +<pre class="brush: js">'\u00A9' // "©"</pre> + +<h4 id="Unicode_编码转义">Unicode 编码转义</h4> + +<p>ECMAScript 6新增特性。使用Unicode编码转义，任何字符都可以被转义为十六进制编码。最高可以用到<code>0x10FFFF</code>。使用单纯的Unicode转义通常需要写成分开的两半以达到相同的效果。</p> + +<p>可以参考{{jsxref("String.fromCodePoint()")}}和{{jsxref("String.prototype.codePointAt()")}}。</p> + +<pre class="brush: js">'\u{2F804}' + +// 使用单纯 Unicode 转义 +'\uD87E\uDC04'</pre> + +<h3 id="正则表达式直接量">正则表达式直接量</h3> + +<p>更多信息可以参考 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a>。</p> + +<pre class="brush: js">/ab+c/g + +// 一个空的正则表达式直接量 +// 必须有一个空的非捕获分组 +// 以避免被当成是行注释符号 +/(?:)/</pre> + +<h3 id="模板直接量">模板直接量</h3> + +<p>更多信息可以参考<a href="/en-US/docs/Web/JavaScript/Reference/template_strings">template strings</a>。</p> + +<pre class="brush: js">`string text` + +`string text line 1 + string text line 2` + +`string text ${expression} string text` + +tag `string text ${expression} string text`</pre> + +<h2 id="自动分号补全">自动分号补全</h2> + +<p>一些 <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript 语句</a>必须用分号结束，所以会被自动分号补全 (ASI)影响：</p> + +<ul> + <li>空语句</li> + <li><code>let</code>、<code>const</code>、变量声明</li> + <li><code>import</code>、<code>export</code>、模块定义</li> + <li>表达式语句</li> + <li><code>debugger</code></li> + <li><code>continue</code>、<code>break</code>、<code>throw</code></li> + <li><code>return</code></li> +</ul> + +<p>ECMAScript 规格提到<a href="http://people.mozilla.org/~jorendorff/es6-draft.html#sec-rules-of-automatic-semicolon-insertion">自动分号补全的三个规则</a>。</p> + +<p>1. 当出现一个不允许的<a href="#Line_terminators">行终止符</a>或“}”时，会在其之前插入一个分号。</p> + +<pre class="brush: js">{ 1 2 } 3 + +// 将会被 ASI 转换为 + +{ 1 2 ;} 3;</pre> + +<p>2. 当捕获到标识符输入流的结尾，并且无法将单个输入流转换为一个完整的程序时，将在结尾插入一个分号。</p> + +<p>在下面这段中，由于在 <code>b</code> 和 <code>++</code> 之间出现了一个行终止符，所以 <code>++</code> 未被当成变量 <code>b</code> 的<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">后置运算符</a>。</p> + +<pre class="brush: js">a = b +++c + +// 将被 ASI 转换为 + +a = b; +++c; +</pre> + +<p>3. 当语句中包含语法中的限制产品后跟一个行终止符的时候，将会在结尾插入一个分号。带“这里没有行终止符”规则的语句有：</p> + +<ul> + <li>后置运算符（<code>++</code> 和 <code>--</code>）</li> + <li><code>continue</code></li> + <li><code>break</code></li> + <li><code>return</code></li> + <li><code>yield</code>、<code>yield*</code></li> + <li><code>module</code></li> +</ul> + +<pre class="brush: js">return +a + b + +// 将被 ASI 转换为 + +return; +a + b; +</pre> + +<h2 id="规格">规格</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规格</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2("ES1")}}</td> + <td>初始定义</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>增加：二进制和八进制数值直接量，Unicode 编码转义直接量、模板直接量</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("javascript.grammar")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden: Binary and octal numbers</a></li> + <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens: JavaScript character escape sequences</a></li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("RegExp")}}</li> + <li>{{jsxref("String")}}</li> +</ul> |