英文 | https://medium.com/dailyjs/javascript-strings-10-fundamentals-you-should-know-d29e6e5f3a1a

今天這篇文章眼于 JavaScript 中字符串的 11 個(gè)最重要的知識(shí)。

1. 使用單引號(hào)和雙引號(hào)創(chuàng)建字符串

字符串可以用單引號(hào)和雙引號(hào)定義。

"text"'text'

他們都創(chuàng)建了幾乎相同的字符串。

"text" === 'text'//true

這樣的字符串必須適合單行，我們不能以這種方式定義跨越多行的字符串。

當(dāng)字符串用雙引號(hào)定義時(shí)，我們需要轉(zhuǎn)義其中的其他雙引號(hào)。 \（反斜杠）用于轉(zhuǎn)義字符。

"text with \"double quotes\" inside"

用單引號(hào)定義字符串時(shí)，不需要對(duì)雙引號(hào)進(jìn)行轉(zhuǎn)義。

'text with "double quotes" inside'

用雙引號(hào)定義字符串時(shí)也是如此，這意味著我們不需要在其中轉(zhuǎn)義單引號(hào)。

"text with single 'quotes' "

包含相同文本的兩個(gè)字符串相等。

"Text" === "Text"//true

\（反斜杠）也用于在字符串中包含 \ 字符或換行符。

"The first line\nThe second line"

2.字符串是不可變的

確實(shí)，一旦聲明的字符串不能更改，所有字符串方法都不能更改源字符串，他們總是創(chuàng)造一個(gè)新的文本。

考慮下一個(gè)例子， replace 方法不會(huì)更改當(dāng)前字符串，而是創(chuàng)建一個(gè)新字符串。

replace 方法在字符串中搜索指定的子字符串，并返回替換給定子字符串的新字符串。當(dāng)使用字符串作為第一個(gè)參數(shù)調(diào)用時(shí)，它僅替換第一次出現(xiàn)。

const str = "abc";
const newStr = str.replace("a", "A");
console.log(str);//"abc"console.log(newStr)//"Abc"

字符串中的字符可以像在數(shù)組中一樣使用括號(hào)內(nèi)的索引進(jìn)行訪問(wèn)，這可能會(huì)給人一種印象，即我們可以更改該索引處的字符。這是一個(gè)錯(cuò)誤的假設(shè)，字符串中的字符不能更改。

const text = 'ABC';text[0] = 'X';//TypeError: Cannot assign to read only property '0' of string 'ABC'

4. 字符串看起來(lái)有方法

JavaScript 允許我們調(diào)用字符串上的方法，給人一種他們是某種對(duì)象的錯(cuò)覺(jué)。字符串不是對(duì)象。當(dāng)我們?cè)谧址险{(diào)用方法時(shí)，JavaScript 使用內(nèi)置的 String 構(gòu)造函數(shù)創(chuàng)建一個(gè)包裝對(duì)象，并在新創(chuàng)建的對(duì)象上調(diào)用該方法。

例如，在字符串上調(diào)用 trim 方法在幕后看起來(lái)像這樣。

new String(" text ").trim();

trim 方法刪除字符串開(kāi)頭和結(jié)尾之后的空格。刪除所有空白字符，包括空格、制表符、換行符。

const text = " \t\ntext\n\t ";const newText = text.trim();//"text"

所有字符串方法都在 String.prototype 對(duì)象上定義。

5. 內(nèi)置String函數(shù)可以將任意值轉(zhuǎn)換成字符串

事實(shí)上，我們可以使用 String 內(nèi)置函數(shù)將任何類型的值轉(zhuǎn)換為字符串。它是將原始類型轉(zhuǎn)換為字符串的最佳選擇。檢查下一個(gè)示例：

String(0)//'0'
String(true)//'true'
String(null)//'null'
String(undefined)//'undefined'
String([1,2,3])//'1,2,3'
String({ msg: 'Hi'})//'[object Object]'
String(Symbol('id'))//'Symbol(id)'

如你所見(jiàn)，所有約定看起來(lái)都很好，除了轉(zhuǎn)換為原始通用字符串“[object Object]”的對(duì)象。甚至數(shù)組也被轉(zhuǎn)換為一個(gè)漂亮的字符串，其所有值都用逗號(hào)分隔。

6. + 運(yùn)算符同時(shí)進(jìn)行加法和連接

當(dāng)其中一個(gè)操作數(shù)是字符串時(shí)，加號(hào)運(yùn)算符 (+) 成為連接運(yùn)算符。檢查下一個(gè)示例。

"A" + " " + "text"//"A text"
1 + "2"//"12"

concat 方法可以實(shí)現(xiàn)類似的行為，它將所有字符串參數(shù)連接到當(dāng)前字符串并返回一個(gè)新字符串。


"A".concat("B")//"AB"
"A".concat(" ", "text")//"A text"
"1".concat(2)//"12"

7. 字符串可以與數(shù)組相互轉(zhuǎn)換

split 方法根據(jù)分隔符將文本拆分為子字符串?dāng)?shù)組。下面是一個(gè)例子。

const quote = 'Winter is coming';const words = quote.split(' ');//["Winter", "is", "coming"]

這是使用逗號(hào)作為分隔符來(lái)拆分文本的另一個(gè)示例。

const csv = 'Fire,and,Blood';const arr = csv.split(',');//["Fire", "and", "Blood"]

join 數(shù)組方法通過(guò)使用指定的字符串分隔符字符串連接數(shù)組中的所有元素來(lái)創(chuàng)建一個(gè)新字符串。如果沒(méi)有提供分隔符，則默認(rèn)使用逗號(hào)。

下面是一個(gè)例子。

const arr = ['Fire', 'and', 'Blood'];const text = arr.join(' ');//'Fire and Blood'

8. 方法允許檢測(cè)字符串中是否包含子字符串

indexOf 方法返回字符串中指定文本第一次出現(xiàn)的索引。當(dāng)找不到文本時(shí)，它返回-1。

const quote = "Here we stand";const firstIndex = quote.indexOf(" ");console.log(firstIndex) //4

lastIndexOf 方法返回字符串中指定文本最后一次出現(xiàn)的索引，當(dāng)找不到文本時(shí)，它返回-1。

const quote = "Here we stand";const lastIndex = quote.lastIndexOf(" ");console.log(lastIndex) //7

startsWith 方法檢查字符串是否以給定的子字符串開(kāi)頭并返回一個(gè)布爾值 (true/false)。 startsWith 方法區(qū)分大小寫。

const quote = "First in Battle";console.log(quote.startsWith("First"));//true

endsWith 方法檢查字符串是否以給定的子字符串結(jié)尾，并根據(jù)需要返回 true 或 false。

const quote = "We Remember";console.log(quote.endsWith("We"));//false

include 方法檢查字符串是否包含給定的子字符串，并根據(jù)需要返回 true 或 false。

const quote = "Our Blades are Sharp";console.log(quote.includes("are"));//true

9. 3種方法允許提取字符串的一部分

有 3 種方法，可能太多，用于提取字符串的一部分。

substr(start, length) 方法提取字符串的一部分，從指定的索引開(kāi)始并返回指定的字符數(shù)。第一個(gè)字符位于索引 0 處。

const quote = "Winter is coming";
const part1 = quote.substr(0, 6);//Winter
const part2 = quote.substr(10, 6);//coming

起始索引是必需的，但長(zhǎng)度是可選的。如果省略，它將提取字符串的其余部分。

const quote = "Winter is coming";const part = quote.substr(6);// is coming

substring(start, end) 方法返回開(kāi)始和結(jié)束索引之間的字符串部分。它以起始索引處的字符開(kāi)始并結(jié)束，但不包括結(jié)束索引處的字符。

const quote = "We Stand Together";const part = quote.substring(3, 8);// Stand

如果省略結(jié)束索引，它會(huì)提取到字符串的末尾。

const quote = "We Stand Together";const part = quote.substring(3);// Stand Together

這與 indexOf 方法結(jié)合使用效果很好?？紤]以下代碼提取第一個(gè)逗號(hào)后的文本。

const quote = "You know nothing,Jon Snow";
const commaIndex = quote.indexOf(",");
const part = quote.substring(commaIndex + 1);//"Jon Snow"

slice 與 substring 具有相同的接口，并且基本上是為了模仿數(shù)組接口而添加的。

10. 模板字符串允許嵌入表達(dá)式

模板字符串文字可以創(chuàng)建跨越多行并允許插值的字符串。

模板字符串使用反引號(hào) (`) 字符定義。

`Wisdom  and  Strength`

有效的表達(dá)式可以放在模板字符串文字中，表達(dá)式被評(píng)估并轉(zhuǎn)換為字符串。

const word = "Awake";`${word}! ${word}!`//"Awake! Awake!"

11. 使用 Unicode UTF-16 表示字符串

使用一個(gè)或多個(gè) UTF-16 代碼單元存儲(chǔ)一個(gè)字符。

length 屬性被稱為返回字符串中的字符數(shù)，但它實(shí)際上返回的是 UTF-16 單元的數(shù)量，僅當(dāng)每個(gè)字符都適合 16 位時(shí)，它才返回字符數(shù)，否則返回一個(gè)大數(shù)字。

const word = 'Hi';console.log(word.length)//2

考慮下一個(gè)顯示需要存儲(chǔ) 2 x 16 位的表情符號(hào)字符的示例。

const word = 'Hi??';console.log(word.length)//4

如你所見(jiàn)，在這種情況下，長(zhǎng)度屬性不能正確表示字符數(shù)。

charAt 方法返回一個(gè)新字符串，其中包含位于給定索引處的單個(gè) UTF-16 代碼單元，這清楚地表明我們只能讀取特定索引處的代碼單元。

const word = 'Hi;console.log(word.charAt(0))//H

但是，charAt 無(wú)法正確返回表情符號(hào)字符，因?yàn)樗褂?2 個(gè)代碼單元。

const word = 'Hi??';console.log(word.charAt(2))//?

為了獲得正確的大小和索引訪問(wèn)，我們需要將字符串轉(zhuǎn)換為字符數(shù)組。

請(qǐng)注意，當(dāng)使用空字符串作為分隔符時(shí)，split 方法不會(huì)正確地將字符串轉(zhuǎn)換為字符數(shù)組。

const word = 'Hi??';const chars = word.split("");//["H", "i", "?", "?"]

Array.from 實(shí)用程序從類數(shù)組或可迭代對(duì)象創(chuàng)建一個(gè)新數(shù)組。

類數(shù)組對(duì)象具有索引訪問(wèn)和長(zhǎng)度屬性，但沒(méi)有數(shù)組方法，字符串是一個(gè)類似數(shù)組的對(duì)象。

Array.from 處理字符超過(guò) 16 位的情況，一旦我們有了字符數(shù)組，我們就可以正確計(jì)算字符串中的字符數(shù)。

const word = 'Hi??';const chars = Array.from(word);
console.log(word.length);//4console.log(chars.length);//3

當(dāng)字符串被正確地轉(zhuǎn)換為字符數(shù)組時(shí)，即使需要兩個(gè)代碼單元來(lái)表示，我們也可以準(zhǔn)確地訪問(wèn)給定索引處的字符。

console.log(chars[2]);//??

寫在最后

今天的內(nèi)容到這里就結(jié)束了，希望這篇文章對(duì)你有用，另外，如果你覺(jué)得有幫助的話，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它與你的開(kāi)發(fā)者朋友一起來(lái)分享它，感謝你的閱讀，編程愉快！

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

11 個(gè)你應(yīng)該知道的JavaScript 字符串的基礎(chǔ)知識(shí)

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)