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

譯文 | 楊小愛

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

JavaScript String 類型簡介

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

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

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

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

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

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

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

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

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

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

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

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

'literal string'.toUpperCase();

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

字符串操作

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

1) 連接字符串

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

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

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

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

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

2) 提取子符串

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

substr(startIndex,[length]);

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

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

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

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

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

substring(startIndex,endIndex)

請參閱以下示例：

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

3) 定位子符串

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

string.indexOf(substring,[fromIndex]);

indexOf()方法接受兩個參數(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)的位置，請使用lastIndexOf()方法。

string.lastIndexOf(substring,[fromIndex])

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

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

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

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

4) 去除空白字符串

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

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

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

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

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

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

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

5) 變更案例

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

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

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

6) 比較字符串

要比較兩個字符串，請使用 localeCompare() 方法：

first.localeCompare(second);

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

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

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

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

例如：

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

7) 匹配模式

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

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

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

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

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

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

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

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

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

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

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

8) 替換子符串

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

string.replace(regularExpression, replaceText)

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

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

以下示例說明了如何使用正則表達式將 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"

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

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

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

總結(jié)

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

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

如果您錯過了之前的內(nèi)容，請點擊下文進行閱讀。

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

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

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

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

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

請點擊下方公眾號