JAVASCRIPT 基础教程
JAVASCRIPT & DOM
JAVASCRIPT & BOM
JAVASCRIPT 高级教程
JAVASCRIPT 示例
JAVASCRIPT 参考

JavaScript 字符串

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

什么是 JavaScript 中的字符串

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

var myString = 'Hello World!'; // 单引号字符串
var myString = "Hello World!"; // 双引号字符串

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

var str1 = "it's okay";
var str2 = 'He said "Goodbye"';
var str3 = "She replied 'Calm down, please'";
var str4 = 'Hi, there!"; // 语法错误 - 引号必须匹配

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

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); // 打印 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); // 打印 28
 
var str2 = "This is a \n paragraph of text.";
document.write(str2.length); // 打印 30,因为 \n 只是一个字符

注意:由于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); // 输出: 7

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

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

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

var str = "If the facts don't fit the theory, change the facts.";
 
// 向前搜索
var pos1 = str.indexOf("facts", 20);
alert(pos1); // 输出: 46
 
// 向后搜索
var pos2 = str.lastIndexOf("facts", 20);
alert(pos2); // 输出: 7

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


在字符串中搜索模式

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

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

var str = "Color red looks brighter than color blue.";
 
// 区分大小写的搜索
var pos1 = str.search("color");
alert(pos1); // 输出: 30
 
// 使用正则表达式进行不区分大小写的搜索
var pos2 = str.search(/color/i);
alert(pos2); // 输出: 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)); // 打印 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)); // 打印 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); // 输出: Color red looks brighter than paint blue.

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

var str = "Color red looks brighter than color blue.";
var result = str.replace(/color/i, "paint");
alert(result); // 输出: 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); // 输出: 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)); // 打印 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
 
// 循环遍历 fruits 数组的所有元素
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
 
// 循环遍历字符数组的所有元素并打印它们
for(var i in strArr) {  
    document.write("<br>" + strArr[i]);
}

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

Advertisements