上一章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
【JS字符串及其操作 – JavaScript教程】注意: 字符串中的字符是从左到右建立索引的。第一个字符的索引是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]);
}
推荐阅读
- JS数字类型及其操作 – JavaScript教程
- JS事件和事件处理器 – JavaScript教程
- JS操作符 – JavaScript教程
- JS数据类型 – JavaScript教程
- JS生成输出 – JavaScript教程
- JS使用变量 – JavaScript教程
- JS基本语法 – JavaScript教程
- 开始使用JS编程 – JavaScript教程
- JS编程入门介绍 – JavaScript教程