英文 | https://www.javascripttutorial.net/

譯文 | 楊小愛

那么，在今天的教程中，我們將一起來學(xué)習(xí)JavaScript String類型以及如何有效地操作字符串。

JavaScript String 類型簡(jiǎn)介

String 類型是字符串原始類型的對(duì)象包裝器，可以使用 String 構(gòu)造函數(shù)創(chuàng)建，如下所示：

let str = new String('JavaScript String Type');

String 類型有一個(gè)名為 length 的屬性，用于指定字符串中的字符數(shù)。

console.log(str.length); // 22

在此示例中，length屬性的值為 22，這也是 string中“JavaScript String Type”的字符數(shù)。

要獲取原始字符串值，請(qǐng)使用字符串對(duì)象的以下方法之一：valueOf()、toString() 和 toLocaleString()。

console.log(str.valueOf());console.log(str.toString());console.log(str.toLocaleString())；

要訪問字符串中的單個(gè)字符，請(qǐng)使用帶有數(shù)字索引的方括號(hào) []表示法。如本例所示，第一個(gè)字符的索引為零：

console.log(str[0]); // J

方括號(hào)[]表示法是從 ES5 開始引入的。在 ES5 之前，您使用 charAt() 方法，該方法更加冗長(zhǎng)：

console.log(str.charAt(0)); // J

當(dāng)您對(duì)原始字符串變量或文字字符串調(diào)用方法時(shí)，它會(huì)轉(zhuǎn)換為該String類型的實(shí)例。例如：

'literal string'.toUpperCase();

此功能在 JavaScript 中稱為原始包裝器類型。

字符串操作

String 類型提供了許多有用的方法來有效地操作字符串。我們將在下一節(jié)中檢查它們中的每一個(gè)。

1) 連接字符串

要連接兩個(gè)或多個(gè)字符串，請(qǐng)使用 concat() 方法，如下所示：

let firstName = 'John';let fullName = firstName.concat(' ','Doe');console.log(fullName); // "John Doe"console.log(firstName); // "John"

concat() 方法將一個(gè)或多個(gè)字符串連接到另一個(gè)字符串并返回結(jié)果字符串。請(qǐng)注意， concat() 方法不會(huì)修改原始字符串。

除了 concat() 方法，JavaScript 還使用加法運(yùn)算符 (+) 來連接字符串。在實(shí)踐中，加法運(yùn)算符比 concat() 方法使用得更多。

let firstName = 'John';let fullName = firstName + ' ' + 'Doe';console.log(fullName); // "John Doe"

2) 提取子符串

要從字符串中提取子字符串，請(qǐng)使用以下substr()方法：

substr(startIndex,[length]);

substr()方法接受兩個(gè)參數(shù)。

第一個(gè)參數(shù)startIndex是提取字符的位置，而第二個(gè)參數(shù)length指定要提取的字符數(shù)。

let str = "JavaScript String";
console.log(str.substr(0, 10)); // "JavaScript"console.log(str.substr(11,6)); // "String"

如果省略該length 參數(shù)，則substr()方法會(huì)將字符提取到字符串的末尾。

有時(shí)，您希望使用開始和結(jié)束索引從字符串中提取子字符串。在這種情況下，您可以使用substring()方法：

substring(startIndex,endIndex)

請(qǐng)參閱以下示例：

let str = "JavaScript String";console.log(str.substring(4, 10)); // "Script"

3) 定位子符串

要在字符串中定位子字符串，請(qǐng)使用以下indexOf()方法：

string.indexOf(substring,[fromIndex]);

indexOf()方法接受兩個(gè)參數(shù)：要定位的子字符串和fromIndex 方法開始在字符串中向前搜索的位置。

indexOf()返回字符串中的子字符串的第一次出現(xiàn)的索引。如果未找到子字符串，則該indexOf()方法返回 -1。

let str = "This is a string";console.log(str.indexOf("is")); // 2

以下示例使用fromIndex參數(shù)：

console.log(str.indexOf('is', 3)); //5

要查找字符串中子字符串最后一次出現(xiàn)的位置，請(qǐng)使用lastIndexOf()方法。

string.lastIndexOf(substring,[fromIndex])

與indexOf()方法不同，方法lastindexOf()從fromIndex參數(shù)向后搜索。

console.log(str.lastIndexOf('is')); // 5

如果在字符串中找不到子字符串，lastIndexOf()方法也會(huì)返回-1，如下例所示：

console.log(str.lastIndexOf('are')); // -1

4) 去除空白字符串

要?jiǎng)h除字符串的所有前導(dǎo)和尾隨空白字符，請(qǐng)使用該trim()方法。

let rawString = ' Hi  ';let strippedString = rawString.trim();console.log(strippedString); // "Hi"

請(qǐng)注意，trim() 方法創(chuàng)建了原始字符串的副本，并刪除了空白字符，它不會(huì)更改原始字符串。

請(qǐng)注意，trim() 方法僅從 ES5 開始可用。

ES6 引入了兩種從字符串中刪除空白字符的新方法：

• trimStart() 返回一個(gè)字符串，其中從字符串的開頭去除了空白字符。

• trimEnd() 返回一個(gè)字符串，其中從字符串的末尾去除了空白字符。

5) 變更案例

要更改字符串的大小寫，您可以使用 toLowerCase() 和 toUpperCase() 方法：

let greeting = 'Hello';console.log(greeting.toLowerCase()); // 'hello'console.log(greeting.toUpperCase()); // 'HELLO';

在某些語言中，將字符串轉(zhuǎn)換為小寫和大寫的規(guī)則非常具體。因此，使用 toLocaleLowerCase() 和 toLocaleUpperCase() 方法更安全，尤其是當(dāng)您不知道代碼將處理哪種語言時(shí)。

6) 比較字符串

要比較兩個(gè)字符串，請(qǐng)使用 localeCompare() 方法：

first.localeCompare(second);

localeCompare() 返回三個(gè)值之一：-1、0 和 1。

• 如果第一個(gè)字符串按字母順序排在第二個(gè)字符串之前，則該方法返回 -1。

• 如果第一個(gè)字符串按字母順序排在第二個(gè)字符串之后，則該方法返回 1。

• 如果兩個(gè)字符串相等，則該方法返回 0。

例如：

console.log('A'.localeCompare('B')); // -1console.log('B'.localeCompare('B')); // 0console.log('C'.localeCompare('B')); // 1

7) 匹配模式

match() 方法允許您將字符串與指定的正則表達(dá)式匹配并獲得結(jié)果數(shù)組。

如果 match() 方法找不到任何匹配項(xiàng)，則返回 null。否則，它返回一個(gè)包含整個(gè)匹配項(xiàng)和任何括號(hào)捕獲匹配結(jié)果的數(shù)組。

如果未設(shè)置全局標(biāo)志 (g)，則數(shù)組的元素零包含整個(gè)匹配項(xiàng)。下面是一個(gè)例子：

let expr = "1 + 2 = 3";let matches = expr.match(/\d+/);console.log(matches[0]); // "1"

在這個(gè)例子中，模式匹配 expr 字符串中的任何數(shù)字。

如果設(shè)置了全局標(biāo)志 (g)，則結(jié)果數(shù)組的元素包含所有匹配項(xiàng)，如下所示：

matches = expr.match(/\d+/g);matches.forEach(function(m) {    console.log(m);});// "1"// "2"// "3"

在此示例中，matches 數(shù)組包含 expr 字符串中的所有匹配項(xiàng)，包括 1、2 和 3。

如果您只需要找出字符串是否與正則表達(dá)式匹配，則可以使用 search() 方法。

與 match() 方法類似，search() 方法接受一個(gè)正則表達(dá)式并返回找到第一個(gè)匹配項(xiàng)的字符串的位置。如果未找到匹配項(xiàng)，則返回 -1。

let str = "This is a test of search()";let pos = str.search(/is/);console.log(pos); // 2

8) 替換子符串

要替換字符串中的子字符串，請(qǐng)使用replace()方法。

string.replace(regularExpression, replaceText)

replace() 方法的第一個(gè)參數(shù)可以是正則表達(dá)式或字符串。如果是正則表達(dá)式，replace() 方法將查找匹配項(xiàng)并將其替換為第二個(gè)參數(shù) (replaceText)。如果是字符串，replace() 方法將執(zhí)行精確搜索并進(jìn)行替換。

replace() 方法在進(jìn)行替換后返回原始字符串的副本。

以下示例說明了如何使用正則表達(dá)式將 the替換為 a：

let str = "the baby kicks the ball";// replace "the" with "a"let newStr = str.replace(/the/g, "a");console.log(newStr); // "a baby kicks a ball"console.log(str); // "the baby kicks the ball"

以下示例顯示了如何通過將第一個(gè)參數(shù)用作文字字符串來替換kickswith holds。

下面的示例展示了如何通過將第一個(gè)參數(shù)用作文字字符串來將 kicks 替換為 Hold。

newStr = str.replace('kicks', 'holds');console.log(newStr); // "the baby holds the ball"

總結(jié)

在今天的教程中，我們學(xué)習(xí)了 JavaScript 字符串類型以及如何有效地操作字符串。

如果您覺得今天內(nèi)容，對(duì)您有幫助，請(qǐng)記得分享給您對(duì)編程感興趣的朋友，也許對(duì)他也有所幫助。

如果您錯(cuò)過了之前的內(nèi)容，請(qǐng)點(diǎn)擊下文進(jìn)行閱讀。

【JavaScript 教程】第五章 字符串01— JavaScript 字符串

【JavaScript 教程】第四章 程序流程08— JavaScript continue 語句

【JavaScript 教程】第四章 程序流程07— JavaScript break 語句

【JavaScript 教程】第四章 程序流程06— JavaScript for 循環(huán)

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)