JavaScript 字符串

在本教程中,你将学习如何在 JavaScript 中创建和操作字符串。

JavaScript 中的 String 是什么

字符串是一系列字母、数字、特殊字符和算术值或所有组合。可以通过将字符串文字(即字符串字符)括在单引号(')或双引号(")中来创建字符串,如下例所示:

var myString = 'Hello World!'; // Single quoted string
var myString = "Hello World!"; // Double quoted string

你可以在字符串中使用引号,只要它们与字符串周围的引号不匹配:

var str1 = "it's okay";
var str2 = 'He said "Goodbye"';
var str3 = "She replied 'Calm down, please'";
var str4 = 'Hi, there!"; // Syntax error - quotes must match

但是,你仍然可以在单引号字符串中使用单引号或在双引号字符串中使用双引号,方法是使用反斜杠字符(\) 转义引号,如下所示:

var str1 = 'it\'s okay';
var str2 = "He said \"Goodbye\"";
var str3 = 'She replied \'Calm down, please\'';

反斜杠(\)被调用转义字符,而序列 \'\" ,我们已经在上面的例子中被称为用于转义序列

JavaScript 转义序列

转义序列对于你想要使用无法使用键盘输入的字符的情况也很有用。以下是一些其他最常用的转义序列。

  • \n 由换行符替换
  • \t 由制表符替换
  • \r 由回车符替换
  • \b 由退格符替换
  • \\ 被一个反斜杠替换(\

这是一个澄清转义序列实际工作原理的例子:

var str1 = "The quick brown fox \n jumps over the lazy dog.";
document.write("<pre>" + str1 + "</pre>"); // Create line break
 
var str2 = "C:\Users\Downloads";
document.write(str2); // Prints C:UsersDownloads
 
var str3 = "C:\\Users\\Downloads";
document.write(str3); // Prints C:\Users\Downloads

对字符串执行操作

JavaScript 提供了几个属性和方法来对字符串值执行操作。从技术上讲,只有对象可以具有属性和方法。但是在 JavaScript 中,当你使用属性访问表示法(即点表示法)引用它们时,原始数据类型可以像对象一样。

JavaScript 通过为原始数据类型创建临时包装器对象使其成为可能。此过程由 JavaScript 解释器在后台自动完成。

获取字符串的长度

length 属性返回字符串的长度,即字符串中包含的字符数。这包括特殊字符的数量,例如 \t\n

var str1 = "This is a paragraph of text.";
document.write(str1.length); // Prints 28
 
var str2 = "This is a \n paragraph of text.";
document.write(str2.length); // Prints 30, because \n is only one character

注意: 既然 length 是属性,而不是函数,所以不要在它之后使用括号 str.length() 。而只是写 str.length ,否则会产生错误。

在另一个字符串中查找字符串

你可以使用 indexOf() 方法在另一个字符串中查找子字符串或字符串。此方法返回字符串中第一次出现的指定字符串的索引或位置。

var str = "If the facts don't fit the theory, change the facts.";
var pos = str.indexOf("facts");
alert(pos); // 0utputs: 7

类似地,你可以使用 lastIndexOf() 方法获取字符串中最后一次出现的指定字符串的索引或位置,如下所示:

var str = "If the facts don't fit the theory, change the facts.";
var pos = str.lastIndexOf("facts");
alert(pos); // 0utputs: 46

无论是 indexOf()lastIndexOf() 方法返回 -1 ,如果子字符串没有找到的话。两种方法都接受一个可选的整数参数,该参数指定字符串中开始搜索的位置。这是一个例子:

var str = "If the facts don't fit the theory, change the facts.";
 
// Searching forwards
var pos1 = str.indexOf("facts", 20);
alert(pos1); // 0utputs: 46
 
// Searching backwards
var pos2 = str.lastIndexOf("facts", 20);
alert(pos2); // 0utputs: 7

注意: 字符串中的字符从左到右编制索引。第一个字符的索引是 0,名为 myStr 的字符串的最后一个字符的索引是 myStr.length - 1

在字符串中搜索模式

你可以使用 search() 方法搜索字符串中的特定文本或模式。

indexOf() 方法一样,该 search() 方法也返回第一个匹配的索引,如果没有找到匹配则返回 -1,但与 indexOf() 方法不同,此方法也可以将正则表达式作为其参数来提供高级搜索功能。

var str = "Color red looks brighter than color blue.";
 
// Case sensitive search
var pos1 = str.search("color");
alert(pos1); // 0utputs: 30
 
// Case insensitive search using regexp
var pos2 = str.search(/color/i);
alert(pos2); // 0utputs: 0

注意:search() 方法不支持全局搜索; 它会忽略其正则表达式参数的 g 标志或修饰符(即 /pattern/g)。

你将在接下来的章节中了解有关正则表达式的更多信息。

从字符串中提取子字符串

你可以使用 slice() 方法从字符串中提取部分或子字符串。

此方法需要 2 个参数: start index (开始提取的索引)和可选的 end index (结束提取之前的索引),如 str.slice(startIndex, endIndex)

以下示例将字符串的一部分从位置 4 切割到位置 15:

var str = "The quick brown fox jumps over the lazy dog.";
var subStr = str.slice(4, 15);
document.write(subStr); // Prints: quick brown

你还可以指定负值。负值被视为 strLength + startIndex ,这里 strLength 是字符串的长度 str.length ,例如,如果 startIndex-5 ,那么它是作为处理 strLength - 5 。如果 startIndex 大于或等于字符串的长度,则 slice() 方法返回一个空字符串。此外,如果 endIndex 未指定或省略,则 slice() 方法将提取到字符串的末尾。

var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.slice(-28, -19)); // Prints: fox jumps
document.write(str.slice(31)); // Prints: the lazy dog.

你还可以使用该 substring() 方法根据开始和结束索引提取给定字符串的一部分,例如 str.substring(startIndex, endIndex) 。该 substring() 方法与 slice() 方法非常相似,只是差异很小:

  • 如果任一参数小于 0 或者是 NaN ,则将其视为 0
  • 如果任一参数大于 str.length ,则将其视为是 str.length
  • 如果 startIndex 大于 endIndex ,那么 substring() 将交换这两个参数; 例如, str.substring(5, 0) == str.substring(0, 5)

以下示例将向你展示此方法如何工作:

var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.substring(4, 15)); // Prints: quick brown
document.write(str.substring(9, 0)); // Prints: The quick
document.write(str.substring(-28, -19)); // Prints nothing
document.write(str.substring(31)); // Prints: the lazy dog.

从字符串中提取固定数量的字符

JavaScript 也提供 substr() 方法,它类似于 slice() 方法,但是存在细微差别,第二个参数指定要提取的字符数而不是结束索引,如 str.substr(startIndex, length) 。如果 length0 或否数,则返回空字符串。以下示例演示了它的工作原理:

var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.substr(4, 15)); // Prints: quick brown fox
document.write(str.substr(-28, -19)); // Prints nothing
document.write(str.substr(-28, 9)); // Prints: fox jumps
document.write(str.substr(31)); // Prints: the lazy dog.

替换字符串的内容

你可以使用 replace() 方法将字符串的一部分替换为另一个字符串。此方法需要两个参数,一个正则表达式匹配或要替换的子字符串和一个替换字符串,如 str.replace(regexp|substr, newSubstr)

replace() 方法返回一个新字符串,它不会影响原始字符串。以下示例将向你展示它的工作原理:

var str = "Color red looks brighter than color blue.";
var result = str.replace("color", "paint");
alert(result); // 0utputs: Color red looks brighter than paint blue.

默认情况下,该 replace() 方法仅替换第一个匹配项,并且区分大小写。要以不区分大小写的方式替换字符串中的子字符串,可以使用带有修饰符的正则表达式(regexp) i ,如下例所示:

var str = "Color red looks brighter than color blue.";
var result = str.replace(/color/i, "paint");
alert(result); // 0utputs: paint red looks brighter than color blue.

同样,要以不区分大小写的方式替换字符串中所有出现的子字符串,可以将 g 修饰符与 i 修饰符一起使用,如下所示:

var str = "Color red looks brighter than color blue.";
var result = str.replace(/color/ig, "paint");
alert(result); // 0utputs: paint red looks brighter than paint blue.

将字符串转换为大写或小写

你可以使用 toUpperCase() 方法将字符串转换为大写,如下所示:

var str = "Hello World!";
var result = str.toUpperCase();
document.write(result); // Prints: HELLO WORLD!

同样,你可以使用 toLowerCase() 将字符串转换为小写,如下所示:

var str = "Hello World!";
var result = str.toLowerCase();
document.write(result); // Prints: hello world!

连接两个或多个字符串

你可以使用 ++= 赋值运算符连接或组合两个或多个字符串。

var hello = "Hello";
var world = "World";
var greet = hello + " " + world;
document.write(greet); // Prints: Hello World
 
var wish  = "Happy";
    wish += " New Year";
document.write(wish); // Prints: Happy New Year

JavaScript 还提供 concat() 了组合字符串的方法,但不建议这样做。

从字符串访问单个字符

你可以使用 charAt() 方法从字符串中访问单个字符,例如 str.charAt(index) 中的 index 应该指定为 0str.length - 1 之间的整数。如果未提供索引,则返回字符串中的第一个字符,因为默认值为 0

var str = "Hello World!";
document.write(str.charAt());  // Prints: H
document.write(str.charAt(6)); // Prints: W
document.write(str.charAt(30)); // Prints nothing
document.write(str.charAt(str.length - 1)); // Prints: !

有更好的方法来做到这一点。从 ECMAScript 5 开始,字符串可以像只读数组一样处理,你可以使用方括号([])代替 charAt() 方法从字符串中访问单个字符,如以下示例所示:

var str = "Hello World!";
document.write(str[0]); // Prints: H
document.write(str[6]); // Prints: W
document.write(str[str.length - 1]); // Prints: !
document.write(str[30]); // Prints: undefined

注意: 使用 charAt() 和方括号([]) 从字符串访问字符之间的唯一区别是,如果没有找到字符,则 [] 返回 undefined ,而 charAt() 方法返回一个空字符串。

将字符串拆分为数组

split() 方法可用于使用语法将字符串拆分为字符串数组 str.split(separator, limit)seperator 参数指定需要需要分割的字符串,而字符串 limit 参数指定数组的最大长度。

如果 separator 省略参数或在指定的字符串中找不到参数,则将整个字符串分配给数组的第一个元素。以下示例显示了它的工作原理:

var fruitsStr = "Apple, Banana, Mango, Orange, Papaya";
var fruitsArr = fruitsStr.split(", ");
document.write(fruitsArr[0]); // Prints: Apple
document.write(fruitsArr[2]); // Prints: Mango
document.write(fruitsArr[fruitsArr.length - 1]); // Prints: Papaya
 
// Loop through all the elements of the fruits array 
for(var i in fruitsArr) {  
    document.write("<p>" + fruitsArr[i] + "</p>");
}

要将字符串拆分为字符数组,请将空字符串("") 指定为分隔符。

var str = "INTERSTELLAR";
var strArr = str.split("");
document.write(strArr[0]); // Prints: I
document.write(strArr[1]); // Prints: N
document.write(strArr[strArr.length - 1]); // Prints: R
 
// Loop through all the elements of the characters array and print them
for(var i in strArr) {  
    document.write("<br>" + strArr[i]);
}

你将在 JavaScript 循环章节详细了解循环语句。