JS字符串及其操作 – JavaScript教程

上一章JavaScript教程请查看：JS事件和事件处理

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

JavaScript中的字符串是什么

字符串是字母、数字、特殊字符和算术值的序列或它们的组合。字符串可以通过在单引号(‘)或双引号(“)中封装字符串文字(即字符串字符)来创建，如下例所示：

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

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

var str1 = "OK";
var str2 = 'I said "Goodbye"';
var str3 = "She said'please'";
var str4 = 'Hi, there!"; // Syntax error - quotes must match

但是，你仍然可以在单引号内使用单引号，或者在双引号内使用双引号，方法是使用反斜杠字符(\)转义引号，就像这样：

var str1 = 'it\'s OK';
var str2 = "He said \"Goodbye\"";
var str3 = 'She replied \'please\'';

反斜杠()被称为转义字符，而我们在上面的示例中使用的序列\’和\”被称为转义序列。

JavaScript转义序列

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

• 用换行符替换\n
• 用制表符替换\t
• 将\r替换为载波返回字符
• \b被退格字符替换
• 将\\替换为一个反斜杠(\)

这里有一个例子来阐明转义序列实际上是如何工作的:

var str1 = "AAAAA \n BBBBBBB.";
document.write("<pre>" + str1 + "</pre>"); // 创建换行
 
var str2 = "C:\Users\Downloads";
document.write(str2); // 打印 C:UsersDownloads
 
var str3 = "C:\\Users\\Downloads";
document.write(str3); // 打印 C:\Users\Downloads

对字符串执行操作

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

JavaScript通过为基本数据类型创建临时包装器对象使之成为可能，这个过程由后台的JavaScript解释器自动完成。

获取字符串的长度

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

var str1 = "文本段落.";
document.write(str1.length); // 打印28
 
var str2 = "这是 \n文本段落.";
document.write(str2.length); 

注意: 因为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。

在字符串中搜索模式

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

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

var str = "Color red looks brighter than color blue.";
 
// 大小写敏感的搜索
var pos1 = str.search("color");
alert(pos1); // 输出: 30
 
// 使用regexp进行大小写不敏感的搜索
var pos2 = str.search(/color/i);
alert(pos2); // 输出: 0

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

你将会在接下来的章节中学习更多关于正则表达式。

从字符串中提取一个子串

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

这个方法接受两个参数: 开始索引(从该索引开始提取), 和一个可选结束索引(索引之前结束提取), 像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); // 打印: 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)); // 打印: fox jumps
document.write(str.slice(31)); // 打印: 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)); // 打印: quick brown
document.write(str.substring(9, 0)); // 打印: The quick
document.write(str.substring(-28, -19)); // 打印 nothing
document.write(str.substring(31)); // 打印: the lazy dog.

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

JavaScript还提供了substr()方法，该方法与slice()类似，只是略有不同，第二个参数指定要提取的字符数，而不是结束索引，比如str.substr(startIndex, length)。如果长度为0或负数，则返回空字符串。下面的例子演示了它是如何工作的:

var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.substr(4, 15)); // 打印: quick brown fox
document.write(str.substr(-28, -19)); // 打印 nothing
document.write(str.substr(-28, 9)); // 打印: fox jumps
document.write(str.substr(31)); // 打印: 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()方法只替换第一个匹配项，并且是大小写敏感的。要以不区分大小写的方式替换字符串中的子字符串，可以使用正则表达式(regexp)和i修饰符，如下面的示例所示

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); // 打印: HELLO WORLD!

类似地，可以使用toLowerCase()将字符串转换为小写形式，如下所示

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

连接两个或多个字符串

可以使用+和+=赋值操作符连接或组合两个或多个字符串。

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

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

从字符串中访问单个字符

你可以使用charAt()方法来访问字符串中的单个字符，比如str.charAt(index)。指定的索引应该是0和str.length – 1之间的整数。如果没有提供索引，则返回字符串中的第一个字符，因为默认值是0。

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

还有更好的方法。由于ECMAScript 5，可以将字符串视为只读数组，并且可以使用方括号([])而不是charAt()方法访问字符串中的单个字符，如下面的示例所示

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

注意: 使用charAt()和方括号([])从字符串访问字符的惟一区别是，如果没有找到字符，[]返回未定义的字符，而charAt()方法返回空字符串。

将字符串拆分为数组

split()方法可以使用语法str.split(分隔符，limit)将字符串分割成字符串数组。seperator参数指定每个拆分应该出现的字符串，而limit参数指定数组的最大长度。

如果分隔符参数被省略或在指定的字符串中未找到，则将整个字符串分配给数组的第一个元素。下面的例子展示了它是如何工作的:

var fruitsStr = "Apple, Banana, Mango, Orange, Papaya";
var fruitsArr = fruitsStr.split(", ");
document.write(fruitsArr[0]); // 打印: Apple
document.write(fruitsArr[2]); // 打印: Mango
document.write(fruitsArr[fruitsArr.length - 1]); // 打印: Papaya
 
//  循环遍历水果数组的所有元素
for(var i in fruitsArr) {  
    document.write("<p>" + fruitsArr[i] + "</p>");
}

若要将字符串拆分为字符数组，请指定空字符串(“”)作为分隔符。

var str = "INTERSTELLAR";
var strArr = str.split("");
document.write(strArr[0]); // 打印: I
document.write(strArr[1]); // 打印: N
document.write(strArr[strArr.length - 1]); // 打印: R
 
// 循环遍历字符数组的所有元素并打印它们
for(var i in strArr) {  
    document.write("<br>" + strArr[i]);
}