當你敲下第一行 JavaScript 代碼時，我們就已經進入了 JavaScript 的世界了。

在 JavaScript 的世界里，這里的一切都是由我們所敲下的每一個字符所決定，我們一般把這些字符稱為我們的基礎元素，之后一切的規則和聯系都是由此產生。

古人把我們的宇宙萬物劃分為是由“金”、“木”、“水”、“火”、“土”5 種基礎元素組成。那你知道 JavaScript 的世界是由幾種基礎元素組成的嗎？

輸入基礎元素

同五行劃分一樣，我們輸入 JavaScript 代碼中的每個字符，也可以被大體分類。我們把所有的輸入統稱為inputElement，宏觀上來看，他們可以被分為這 4 大類

可以看到，我們的輸入元素基本被分為：

• WhiteSpace：空白字符（其中最常見的就是我們敲的空格）
• LineTerminator：換行符（我不相信你寫代碼的時候從來不換行，換行時候用的那個就是了）
• Comment：注釋（就是程序員們都想看，但又都不想寫的那些東西）
• Token：令牌（Token 其實很難有一個很好的翻譯，而且它是一個很泛的概念，之后我會詳細的為大家講解）

WhiteSpace：空白字符

首先來為大家介紹一下我們的空白字符?？瞻鬃址且粋€常見且神奇的元素，tab、space都屬于我們常見且常用的空白字符。除了tab和space，我們還有其他幾種空白字符，看看你有沒有見過。

• ：縱向 Tab 符
• ：換頁符
• ：NB 空格
• ：ZWNB 空格
• ：其他 Unicode 空白

這里大家可以看到我們熟悉的身影：<NBSP>，是否還記得我們的 HTML 的 Entity（Entity 概念也是 HTML 里面鮮為人知的一個概念，之后我會在 HTML 章節細講）里面也有著&nbsp;這個東西？

大多數人覺得這只是空格，其實不然！相比于空格space，nbsp可多了一個nb。

好了我知道你腦海里面一定會冒出牛逼空格這個概念了，不過這個空格確實有它的過人之處。

這個過人之處就要從他的名字中的說起，nb代表的是no-break，也就是說他是不會被打破，其實就是相比于正常空格，nbsp是一個不會換行的空格，不信你可以試一下～

然后還有一個比<NBSP>名字更長的空格叫做<ZWNBSP>空格，這個<ZWNBSP>空格是空格界的黑魔法，他的全稱叫做zero-width-no-break-space也就是零寬空格。你可以通過它制造一些令人匪 huai 夷 yi 所 ren 依 sheng 的代碼片段，比如：

小伙伴們發現原來還能這樣聲明變量a？？？于是小伙伴們紛紛也在下面打出了這一行代碼，于是紛紛得到下面的結果

是不是很神奇，看起來一樣的代碼卻產生了不同的結果！其中的原因就是我們前一段代碼在var與a之間插入了一個大家看不見的空白字符<ZWNBSP>。

這個字符無法直接打出，但是我們可以通過 unicode 碼uEFEE進行輸入。

這里友情提示：千萬不要在工作中使用<ZWNBSP>，否則你的同事應該會把你打個半死..

LineTerminator：換行符

換行符這里一般就是指我們的回車與換行，還有兩個不常見的<PS>和<LS>基本可以忽略。

很多人可能會覺得奇怪，會什么一個換行需要兩個字符？

我們可以經常看到我們的代碼里換行都是rn這樣的寫法，這樣的原因其實是來自于打字機的換行操作（因為最早的計算機都是類似于打孔機一樣的東西）

打字機換行操作是

移到行首

切換到下一行

于是延續至今，我們的計算機也就出現了

r移到行首

n切換到下一行

Comment：注釋

人人都想看注釋，人人都不想寫注釋。 ——魯迅

說到注釋，這可真是任何語言中都必不可缺的東西了。在我們的 JavaScript 中，他當然也占據著舉足輕重的地位。它的基礎形式也很簡單，主要分為以下兩類

//

/* */

剩下的就是大家在里面的肆 bu 意 ke 創 neng 作 xie 了

Token：令牌

接下來就是我們的重頭戲：Token。據不完全統計，我們日常 coding 中的 98%輸入字符都屬于 Token 范疇，其實 Token 范疇很廣，目前也沒有一個很好的翻譯內容，所以我們就先叫它令牌吧，下面先跟大家大體的介紹一下 Token 概念。

Token 主要由以下幾部分組成：

• IdentifierName：標識名稱
• Punctuators：符號
• Template：模版
• Literal：直接量

IdentifierName：標識名稱

標識名稱（IdentifierName）其實很好理解，你寫的那些變量名、方法名、類名都屬于標識名稱。除了你起的五花八門的名稱，標識名稱還包括 JavaScript 的關鍵字和保留字，這些名字是不能隨便亂用的！總的來說，標識名稱包含這些東西

• Keywords：關鍵字（for，while，var，let，const...）
• Future reserved Keywords：保留字
• Identify：標識（變量名/方法名/類名/... 你自己定義的名稱）

如果你想要查詢關鍵字有哪些，可以看JavaScript Keywords，保留字基本上現在好像也就一個enum所以記住就好啦～

而關于命名規則，你可以查看文檔中關于變量命名的規則部分，日常工作中別用亂七八糟的字符就好了

Punctuators：符號

Punctuators 就是我們各種各樣的符號，這里會分為三類，分別為：

• Punctuator：{()[]....;,<><=>===!====!==+-*%**++--<<>>>>>&|^!~ &&||?:=+=-=*=%=**=<<=>>=>>>=&=|=^==>（我看吐了
• DivPunctuator：/，/=
• RightBracePunctuator：}

我們可以看到在眾多符號中/、/=、}特別突出的被單獨拎了出來，這是為什么呢？/是由于在正則和數字計算時有著不同的意義。而/=和}也不知道是什么（我猜}是由于標識代碼塊的結束范圍和模版中的特殊標識）

還有一個特殊的字符 “”，這個字符在JavaScript中是轉義符，所以如果你想要打出 “”的話，就要寫成""這種形式

所以如何區分符號呢？其實也很簡單，不是/，/=，}那基礎上就是 Punctuator 了！

Template：模版

模版是一塊比較特殊且獨立的模塊，一行代碼概括就是

var username = 'chenmingming' `Hello ${username}!`

就是它！

Literal：直接量

我們上面說了IdentifierName標識名稱、Punctuators符號、Template模版大家是不是覺得還缺點什么？

前面綜合起來就好像是var a =，但是我們沒有內容啊！我們平常寫的var a = 123、var b = 'I am chenmingming'中的123與I am chenmingming才是我們 coding 的重要內容，這些內容其實有個名字，叫做Literal（直接量）

讓我們窮舉一下我們都會有哪些直接量：

var num1 = 123 // 十進制數字 var num2 = 0b101 // 二進制數字 var num3 = 0o177 // 八進制數字 var num4 = 0x1ff // 十六進制數字 var num5 = 1e12 // 科學計數法var str1 = 'abc' // 單引號 var str2 = "abc" // 雙引號 var str3 = 'uFEFF' // u轉義字符 var str4 = 'r' // 回車 var str5 = 'n' // 換行var boo = true // 布爾類型var reg = /[0-9]/ // 正則var spec = null // Null

我們對以上的直接量進行分類可以分為以下幾類：

• NumberLiteral：數字直接量（包含各種進制的數字 + 科學計數法）
• StringLiteral：字符串直接量（單/雙引號正常字符 + 轉義字符 + 回車換行）
• NullLiteral：null
• BooleanLiteral：布爾類型直接量
• RegExpression：正則表達式

基本上上面這些就是整個 Token 的全部內容了，可能很多同學會疑惑，為什么沒有undefined呢？這里也是一個 JavaScript 的設計失誤：把undefined作為一個變量進行設計，并且還可以賦值！同時也引出了一個最佳實踐：在你想使用undefined的時候使用void 0進行替代（因為 void 0 總是會返回一個 undefined），這樣可以避免undefined被賦值而導致的異常行為。

u 轉義與 Unicode 編碼

InputElement 已經全部介紹完了。我們在上面的StringLiteral中發現了這樣的一份代碼，我們日常也會有看到

var str3 = 'uFEFF' // u轉義字符

u 轉義還有一個我們很常見的場景：中文字符輸入，比如下面場景

var 名字 = 'chenmingming' // 上下表達的意思一樣 var u540du5b57 = 'chenmingming'

這兩行代碼在其他場景都會正常的運行，然后你會驚喜的發現，我們的中文原來也可以當作變量名啊，那我以后豈不是可以愉快的寫下面這種代碼？

var 折扣價格 = 折扣計算（商品價格）if (折扣價格 > 100) {console.log('您本次省下了至少100塊！') }

理論上確實是可以的，但是為什么沒有人這么寫呢？這就要涉及到我們 Unicode 碼了。

我們在 JS 中輸入的每個字符本質上都是 Unicode 碼點。我們的 Unicode 的碼點展示出來需要字符集來解析對應的碼點，這個字符集有點像我們的字體庫，如果字符集（字體庫）里面沒有我們對應的碼點（字體），那么就會解析出一堆亂碼，常見的字符集有以下幾種

看到沒有，英文數字之類的都在 ASCII 字符集范圍內所以支持程度也最好，但是你要是用中文，那除了 GB 和 BIG5，其他字符集可看不懂中文，就會亂碼了。所以 JavaScript 采用u 這種形式，標識其對應的 unicode 碼點。

那么關于獲取一個字符的 unicode 編碼呢？這里介紹幾個 API

String.charCodeAt() 和String.codePointAt()：獲取對應字符的碼點

Number.toString([進制數])：將數字轉化為 N 進制

String.fromCharCode()：查詢碼點對應的字符

讓我們來動手試試看

"陳".charCodeAt(0) // 38472 "陳".charCodeAt(0).toString(16) // "9648" 所以“陳”也可以通過u9648表示 String.fromCharCode(38472) // "陳"

結尾

看到這里，我們 JavaScript 中的所有基礎元素就介紹完畢了，你會發現所有的輸入元素都能在其中找到身影。今后你看 JavaScript 的代碼至少每個字符你都認識并知道類別了，那么還有什么能阻擋你閱讀任何 JavaScript 代碼呢？

當然有！那就是 JavaScript 的語法。如果不懂語法就很容易出現我們英語考試時候的尷尬情況：單詞我都看得懂，連在一起就不知道是什么意思了所以接下來我們會介紹JavaScript 的語法部分，敬請期待

最后，如果覺得本文對你有幫助，還請點贊喜歡 支持一下我，謝謝啦

總結

以上是生活随笔為你收集整理的js 换行符_一文看遍 JS 的所有输入（词法篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。