建站
咨詢
售后
建站咨詢
新聞中心
今天這篇文章眼于 JavaScript 中字符串的 11 個(gè)最重要的知識(shí)。
創(chuàng)新互聯(lián)建站-成都網(wǎng)站建設(shè)公司，專(zhuān)注成都網(wǎng)站制作、做網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)推廣，域名與空間，虛擬空間，網(wǎng)站托管、服務(wù)器托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問(wèn)題，請(qǐng)聯(lián)系創(chuàng)新互聯(lián)建站。
1. 使用單引號(hào)和雙引號(hào)創(chuàng)建字符串
字符串可以用單引號(hào)和雙引號(hào)定義。
"text"
'text'
他們都創(chuàng)建了幾乎相同的字符串。
"text" === 'text'
這樣的字符串必須適合單行，我們不能以這種方式定義跨越多行的字符串。
當(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"
\（反斜杠）也用于在字符串中包含 \ 字符或換行符。
"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);
console.log(newStr)
字符串中的字符可以像在數(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();
所有字符串方法都在 String.prototype 對(duì)象上定義。
5. 內(nèi)置String函數(shù)可以將任意值轉(zhuǎn)換成字符串
事實(shí)上，我們可以使用 String 內(nèi)置函數(shù)將任何類(lèi)型的值轉(zhuǎn)換為字符串。它是將原始類(lèi)型轉(zhuǎn)換為字符串的最佳選擇。檢查下一個(gè)示例：
String(0)
String(true)
String(null)
String(undefined)
String([1,2,3])
String({ msg: 'Hi'})
String(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"
1 + "2"
concat 方法可以實(shí)現(xiàn)類(lèi)似的行為，它將所有字符串參數(shù)連接到當(dāng)前字符串并返回一個(gè)新字符串。
"A".concat("B")
"A".concat(" ", "text")
"1".concat(2)
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(' ');
8. 方法允許檢測(cè)字符串中是否包含子字符串
indexOf 方法返回字符串中指定文本第一次出現(xiàn)的索引。當(dāng)找不到文本時(shí)，它返回-1。
const quote = "Here we stand";
const firstIndex = quote.indexOf(" ");
console.log(firstIndex)
lastIndexOf 方法返回字符串中指定文本最后一次出現(xiàn)的索引，當(dāng)找不到文本時(shí)，它返回-1。
const quote = "Here we stand";
const lastIndex = quote.lastIndexOf(" ");
console.log(lastIndex)
startsWith 方法檢查字符串是否以給定的子字符串開(kāi)頭并返回一個(gè)布爾值 (true/false)。 startsWith 方法區(qū)分大小寫(xiě)。
const quote = "First in Battle";
console.log(quote.startsWith("First"));
endsWith 方法檢查字符串是否以給定的子字符串結(jié)尾，并根據(jù)需要返回 true 或 false。
const quote = "We Remember";
console.log(quote.endsWith("We"));
include 方法檢查字符串是否包含給定的子字符串，并根據(jù)需要返回 true 或 false。
const quote = "Our Blades are Sharp";
console.log(quote.includes("are"));
9. 3種方法允許提取字符串的一部分
有 3 種方法，可能太多，用于提取字符串的一部分。
substr(start, length) 方法提取字符串的一部分，從指定的索引開(kāi)始并返回指定的字符數(shù)。第一個(gè)字符位于索引 0 處。
const quote = "Winter is coming";
const part1 = quote.substr(0, 6);
const part2 = quote.substr(10, 6);
起始索引是必需的，但長(zhǎng)度是可選的。如果省略，它將提取字符串的其余部分。
const quote = "Winter is coming";
const part = quote.substr(6);
substring(start, end) 方法返回開(kāi)始和結(jié)束索引之間的字符串部分。它以起始索引處的字符開(kāi)始并結(jié)束，但不包括結(jié)束索引處的字符。
const quote = "We Stand Together";
const part = quote.substring(3, 8);
如果省略結(jié)束索引，它會(huì)提取到字符串的末尾。
const quote = "We Stand Together";
const part = quote.substring(3);
這與 indexOf 方法結(jié)合使用效果很好?？紤]以下代碼提取第一個(gè)逗號(hào)后的文本。
const quote = "You know nothing,Jon Snow";
const commaIndex = quote.indexOf(",");
const part = quote.substring(commaIndex + 1);
slice 與 substring 具有相同的接口，并且基本上是為了模仿數(shù)組接口而添加的。
10. 模板字符串允許嵌入表達(dá)式
模板字符串文字可以創(chuàng)建跨越多行并允許插值的字符串。
模板字符串使用反引號(hào) (`) 字符定義。
`Wisdom
and
Strength`
有效的表達(dá)式可以放在模板字符串文字中，表達(dá)式被評(píng)估并轉(zhuǎn)換為字符串。
const word = "Awake";
`${word}! ${word}!`
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)
考慮下一個(gè)顯示需要存儲(chǔ) 2 x 16 位的表情符號(hào)字符的示例。
const word = 'Hi';
console.log(word.length)
如你所見(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í)用程序從類(lèi)數(shù)組或可迭代對(duì)象創(chuàng)建一個(gè)新數(shù)組。
類(lèi)數(shù)組對(duì)象具有索引訪問(wèn)和長(zhǎng)度屬性，但沒(méi)有數(shù)組方法，字符串是一個(gè)類(lèi)似數(shù)組的對(duì)象。
Array.from 處理字符超過(guò) 16 位的情況，一旦我們有了字符數(shù)組，我們就可以正確計(jì)算字符串中的字符數(shù)。
const word = 'Hi';
const chars = Array.from(word);
console.log(word.length);
console.log(chars.length);
當(dāng)字符串被正確地轉(zhuǎn)換為字符數(shù)組時(shí)，即使需要兩個(gè)代碼單元來(lái)表示，我們也可以準(zhǔn)確地訪問(wèn)給定索引處的字符。
console.log(chars[2]);
寫(xiě)在最后
今天的內(nèi)容到這里就結(jié)束了，希望這篇文章對(duì)你有用，另外，如果你覺(jué)得有幫助的話，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它與你的開(kāi)發(fā)者朋友一起來(lái)分享它，感謝你的閱讀，編程愉快！
分享名稱：11個(gè)你應(yīng)該知道的JavaScript字符串的基礎(chǔ)知識(shí)
當(dāng)前網(wǎng)址：http://www.dlmjj.cn/article/coddcod.html
