JavaScript 字符串

概述

定義

字符串就是零個(gè)或多個(gè)排在一起的字符，放在單引號(hào)或雙引號(hào)之中。

'abc'
"abc"

單引號(hào)字符串的內(nèi)部，可以使用雙引號(hào)。雙引號(hào)字符串的內(nèi)部，可以使用單引號(hào)。

'key = "value"'
"It's a long journey"

上面兩個(gè)都是合法的字符串。

如果要在單引號(hào)字符串的內(nèi)部，使用單引號(hào)，就必須在內(nèi)部的單引號(hào)前面加上反斜杠，用來(lái)轉(zhuǎn)義。雙引號(hào)字符串內(nèi)部使用雙引號(hào)，也是如此。

'Did she say \'Hello\'?'
// "Did she say 'Hello'?"

"Did she say \"Hello\"?"
// "Did she say "Hello"?"

由于 HTML 語(yǔ)言的屬性值使用雙引號(hào)，所以很多項(xiàng)目約定 JavaScript 語(yǔ)言的字符串只使用單引號(hào)，本教程遵守這個(gè)約定。當(dāng)然，只使用雙引號(hào)也完全可以。重要的是堅(jiān)持使用一種風(fēng)格，不要一會(huì)使用單引號(hào)表示字符串，一會(huì)又使用雙引號(hào)表示。

字符串默認(rèn)只能寫(xiě)在一行內(nèi)，分成多行將會(huì)報(bào)錯(cuò)。

'a
b
c'
// SyntaxError: Unexpected token ILLEGAL

上面代碼將一個(gè)字符串分成三行，JavaScript 就會(huì)報(bào)錯(cuò)。

如果長(zhǎng)字符串必須分成多行，可以在每一行的尾部使用反斜杠。

var longString = 'Long \
long \
long \
string';

longString
// "Long long long string"

上面代碼表示，加了反斜杠以后，原來(lái)寫(xiě)在一行的字符串，可以分成多行書(shū)寫(xiě)。但是，輸出的時(shí)候還是單行，效果與寫(xiě)在同一行完全一樣。注意，反斜杠的后面必須是換行符，而不能有其他字符（比如空格），否則會(huì)報(bào)錯(cuò)。

連接運(yùn)算符（?+?）可以連接多個(gè)單行字符串，將長(zhǎng)字符串拆成多行書(shū)寫(xiě)，輸出的時(shí)候也是單行。

var longString = 'Long '
  + 'long '
  + 'long '
  + 'string';

如果想輸出多行字符串，有一種利用多行注釋的變通方法。

(function () { /*
line 1
line 2
line 3
*/}).toString().split('\n').slice(1, -1).join('\n')
// "line 1
// line 2
// line 3"

上面的例子中，輸出的字符串就是多行。

轉(zhuǎn)義

反斜杠（\）在字符串內(nèi)有特殊含義，用來(lái)表示一些特殊字符，所以又稱為轉(zhuǎn)義符。

需要用反斜杠轉(zhuǎn)義的特殊字符，主要有下面這些。

• \0 ：null（\u0000）
• \b ：后退鍵（\u0008）
• \f ：換頁(yè)符（\u000C）
• \n ：換行符（\u000A）
• \r ：回車鍵（\u000D）
• \t ：制表符（\u0009）
• \v ：垂直制表符（\u000B）
• \' ：?jiǎn)我?hào)（\u0027）
• \" ：雙引號(hào)（\u0022）
• \\ ：反斜杠（\u005C）

上面這些字符前面加上反斜杠，都表示特殊含義。

console.log('1\n2')
// 1
// 2

上面代碼中，\n表示換行，輸出的時(shí)候就分成了兩行。

反斜杠還有三種特殊用法。

（1）\HHH

反斜杠后面緊跟三個(gè)八進(jìn)制數(shù)（000到377），代表一個(gè)字符。HHH對(duì)應(yīng)該字符的 Unicode 碼點(diǎn)，比如\251表示版權(quán)符號(hào)。顯然，這種方法只能輸出256種字符。

（2）\xHH

\x后面緊跟兩個(gè)十六進(jìn)制數(shù)（00到FF），代表一個(gè)字符。HH對(duì)應(yīng)該字符的 Unicode 碼點(diǎn)，比如\xA9表示版權(quán)符號(hào)。這種方法也只能輸出256種字符。

（3）\uXXXX

\u后面緊跟四個(gè)十六進(jìn)制數(shù)（0000到FFFF），代表一個(gè)字符。XXXX對(duì)應(yīng)該字符的 Unicode 碼點(diǎn)，比如\u00A9表示版權(quán)符號(hào)。

下面是這三種字符特殊寫(xiě)法的例子。

'\251' // "?"
'\xA9' // "?"
'\u00A9' // "?"

'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true

如果在非特殊字符前面使用反斜杠，則反斜杠會(huì)被省略。

'\a'
// "a"

上面代碼中，a是一個(gè)正常字符，前面加反斜杠沒(méi)有特殊含義，反斜杠會(huì)被自動(dòng)省略。

如果字符串的正常內(nèi)容之中，需要包含反斜杠，則反斜杠前面需要再加一個(gè)反斜杠，用來(lái)對(duì)自身轉(zhuǎn)義。

"Prev \\ Next"
// "Prev \ Next"

字符串與數(shù)組

字符串可以被視為字符數(shù)組，因此可以使用數(shù)組的方括號(hào)運(yùn)算符，用來(lái)返回某個(gè)位置的字符（位置編號(hào)從0開(kāi)始）。

var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"

// 直接對(duì)字符串使用方括號(hào)運(yùn)算符
'hello'[1] // "e"

如果方括號(hào)中的數(shù)字超過(guò)字符串的長(zhǎng)度，或者方括號(hào)中根本不是數(shù)字，則返回undefined。

'abc'[3] // undefined
'abc'[-1] // undefined
'abc'['x'] // undefined

但是，字符串與數(shù)組的相似性僅此而已。實(shí)際上，無(wú)法改變字符串之中的單個(gè)字符。

var s = 'hello';

delete s[0];
s // "hello"

s[1] = 'a';
s // "hello"

s[5] = '!';
s // "hello"

上面代碼表示，字符串內(nèi)部的單個(gè)字符無(wú)法改變和增刪，這些操作會(huì)默默地失敗。

length 屬性

length屬性返回字符串的長(zhǎng)度，該屬性也是無(wú)法改變的。

var s = 'hello';
s.length // 5

s.length = 3;
s.length // 5

s.length = 7;
s.length // 5

上面代碼表示字符串的length屬性無(wú)法改變，但是不會(huì)報(bào)錯(cuò)。

字符集

JavaScript 使用 Unicode 字符集。JavaScript 引擎內(nèi)部，所有字符都用 Unicode 表示。

JavaScript 不僅以 Unicode 儲(chǔ)存字符，還允許直接在程序中使用 Unicode 碼點(diǎn)表示字符，即將字符寫(xiě)成\uxxxx的形式，其中xxxx代表該字符的 Unicode 碼點(diǎn)。比如，\u00A9代表版權(quán)符號(hào)。

var s = '\u00A9';
s // "?"

解析代碼的時(shí)候，JavaScript 會(huì)自動(dòng)識(shí)別一個(gè)字符是字面形式表示，還是 Unicode 形式表示。輸出給用戶的時(shí)候，所有字符都會(huì)轉(zhuǎn)成字面形式。

var f\u006F\u006F = 'abc';
foo // "abc"

上面代碼中，第一行的變量名foo是 Unicode 形式表示，第二行是字面形式表示。JavaScript 會(huì)自動(dòng)識(shí)別。

我們還需要知道，每個(gè)字符在 JavaScript 內(nèi)部都是以16位（即2個(gè)字節(jié)）的 UTF-16 格式儲(chǔ)存。也就是說(shuō)，JavaScript 的單位字符長(zhǎng)度固定為16位長(zhǎng)度，即2個(gè)字節(jié)。

但是，UTF-16 有兩種長(zhǎng)度：對(duì)于碼點(diǎn)在U+0000到U+FFFF之間的字符，長(zhǎng)度為16位（即2個(gè)字節(jié)）；對(duì)于碼點(diǎn)在U+10000到U+10FFFF之間的字符，長(zhǎng)度為32位（即4個(gè)字節(jié)），而且前兩個(gè)字節(jié)在0xD800到0xDBFF之間，后兩個(gè)字節(jié)在0xDC00到0xDFFF之間。舉例來(lái)說(shuō)，碼點(diǎn)U+1D306對(duì)應(yīng)的字符為，它寫(xiě)成 UTF-16 就是0xD834 0xDF06。

JavaScript 對(duì) UTF-16 的支持是不完整的，由于歷史原因，只支持兩字節(jié)的字符，不支持四字節(jié)的字符。這是因?yàn)?JavaScript 第一版發(fā)布的時(shí)候，Unicode 的碼點(diǎn)只編到U+FFFF，因此兩字節(jié)足夠表示了。后來(lái)，Unicode 納入的字符越來(lái)越多，出現(xiàn)了四字節(jié)的編碼。但是，JavaScript 的標(biāo)準(zhǔn)此時(shí)已經(jīng)定型了，統(tǒng)一將字符長(zhǎng)度限制在兩字節(jié)，導(dǎo)致無(wú)法識(shí)別四字節(jié)的字符。上一節(jié)的那個(gè)四字節(jié)字符，瀏覽器會(huì)正確識(shí)別這是一個(gè)字符，但是 JavaScript 無(wú)法識(shí)別，會(huì)認(rèn)為這是兩個(gè)字符。

''.length // 2

上面代碼中，JavaScript 認(rèn)為的長(zhǎng)度為2，而不是1。

總結(jié)一下，對(duì)于碼點(diǎn)在U+10000到U+10FFFF之間的字符，JavaScript 總是認(rèn)為它們是兩個(gè)字符（length屬性為2）。所以處理的時(shí)候，必須把這一點(diǎn)考慮在內(nèi)，也就是說(shuō)，JavaScript 返回的字符串長(zhǎng)度可能是不正確的。

Base64 轉(zhuǎn)碼

有時(shí)，文本里面包含一些不可打印的符號(hào)，比如 ASCII 碼0到31的符號(hào)都無(wú)法打印出來(lái)，這時(shí)可以使用 Base64 編碼，將它們轉(zhuǎn)成可以打印的字符。另一個(gè)場(chǎng)景是，有時(shí)需要以文本格式傳遞二進(jìn)制數(shù)據(jù)，那么也可以使用 Base64 編碼。

所謂 Base64 就是一種編碼方法，可以將任意值轉(zhuǎn)成 0～9、A～Z、a-z、+和/這64個(gè)字符組成的可打印字符。使用它的主要目的，不是為了加密，而是為了不出現(xiàn)特殊字符，簡(jiǎn)化程序的處理。JavaScript 原生提供兩個(gè) Base64 相關(guān)的方法。

• ?btoa()?：任意值轉(zhuǎn)為 Base64 編碼
• ?atob()?：Base64 編碼轉(zhuǎn)為原來(lái)的值

var string = 'Hello World!';
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"

注意，這兩個(gè)方法不適合非 ASCII 碼的字符，會(huì)報(bào)錯(cuò)。

btoa('你好') // 報(bào)錯(cuò)

要將非 ASCII 碼字符轉(zhuǎn)為 Base64 編碼，必須中間插入一個(gè)轉(zhuǎn)碼環(huán)節(jié)，再使用這兩個(gè)方法。

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

參考鏈接

• Mathias Bynens, JavaScript’s internal character encoding: UCS-2 or UTF-16?
• Mathias Bynens, JavaScript has a Unicode problem
• Mozilla Developer Network, Window.btoa