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

译文 | 杨小爱

那么，在今天的教程中，我们将一起来学习JavaScript String类型以及如何有效地操作字符串。

JavaScript String 类型简介

String 类型是字符串原始类型的对象包装器，可以使用 String 构造函数创建，如下所示：

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

String 类型有一个名为 length 的属性，用于指定字符串中的字符数。

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

在此示例中，length属性的值为 22，这也是 string中“JavaScript String Type”的字符数。

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

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

要访问字符串中的单个字符，请使用带有数字索引的方括号 []表示法。如本例所示，第一个字符的索引为零：

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

方括号[]表示法是从 ES5 开始引入的。在 ES5 之前，您使用 charAt() 方法，该方法更加冗长：

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

当您对原始字符串变量或文字字符串调用方法时，它会转换为该String类型的实例。例如：

'literal string'.toUpperCase();

此功能在 JavaScript 中称为原始包装器类型。

字符串操作

String 类型提供了许多有用的方法来有效地操作字符串。我们将在下一节中检查它们中的每一个。

1) 连接字符串

要连接两个或多个字符串，请使用 concat() 方法，如下所示：

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

concat() 方法将一个或多个字符串连接到另一个字符串并返回结果字符串。请注意， concat() 方法不会修改原始字符串。

除了 concat() 方法，JavaScript 还使用加法运算符 (+) 来连接字符串。在实践中，加法运算符比 concat() 方法使用得更多。

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

2) 提取子符串

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

substr(startIndex,[length]);

substr()方法接受两个参数。

第一个参数startIndex是提取字符的位置，而第二个参数length指定要提取的字符数。

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

如果省略该length 参数，则substr()方法会将字符提取到字符串的末尾。

有时，您希望使用开始和结束索引从字符串中提取子字符串。在这种情况下，您可以使用substring()方法：

substring(startIndex,endIndex)

请参阅以下示例：

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

3) 定位子符串

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

string.indexOf(substring,[fromIndex]);

indexOf()方法接受两个参数：要定位的子字符串和fromIndex 方法开始在字符串中向前搜索的位置。

indexOf()返回字符串中的子字符串的第一次出现的索引。如果未找到子字符串，则该indexOf()方法返回 -1。

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

以下示例使用fromIndex参数：

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

要查找字符串中子字符串最后一次出现的位置，请使用lastIndexOf()方法。

string.lastIndexOf(substring,[fromIndex])

与indexOf()方法不同，方法lastindexOf()从fromIndex参数向后搜索。

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

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

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

4) 去除空白字符串

要删除字符串的所有前导和尾随空白字符，请使用该trim()方法。

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

请注意，trim() 方法创建了原始字符串的副本，并删除了空白字符，它不会更改原始字符串。

请注意，trim() 方法仅从 ES5 开始可用。

ES6 引入了两种从字符串中删除空白字符的新方法：

• trimStart() 返回一个字符串，其中从字符串的开头去除了空白字符。

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

5) 变更案例

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

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

在某些语言中，将字符串转换为小写和大写的规则非常具体。因此，使用 toLocaleLowerCase() 和 toLocaleUpperCase() 方法更安全，尤其是当您不知道代码将处理哪种语言时。

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() 方法允许您将字符串与指定的正则表达式匹配并获得结果数组。

如果 match() 方法找不到任何匹配项，则返回 null。否则，它返回一个包含整个匹配项和任何括号捕获匹配结果的数组。

如果未设置全局标志 (g)，则数组的元素零包含整个匹配项。下面是一个例子：

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

在这个例子中，模式匹配 expr 字符串中的任何数字。

如果设置了全局标志 (g)，则结果数组的元素包含所有匹配项，如下所示：

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

在此示例中，matches 数组包含 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() 方法的第一个参数可以是正则表达式或字符串。如果是正则表达式，replace() 方法将查找匹配项并将其替换为第二个参数 (replaceText)。如果是字符串，replace() 方法将执行精确搜索并进行替换。

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"

以下示例显示了如何通过将第一个参数用作文字字符串来替换kickswith holds。

下面的示例展示了如何通过将第一个参数用作文字字符串来将 kicks 替换为 Hold。

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

总结

在今天的教程中，我们学习了 JavaScript 字符串类型以及如何有效地操作字符串。

如果您觉得今天内容，对您有帮助，请记得分享给您对编程感兴趣的朋友，也许对他也有所帮助。

如果您错过了之前的内容，请点击下文进行阅读。

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

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

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

【JavaScript 教程】第四章 程序流程06— JavaScript for 循环

学习更多技能

请点击下方公众号