JavaScript之字符串
JavaScript字符串用于存储和操作文本
JavaScript字符串
JavaScript字符串是引号中的零个或多个字符;
单引号和双引号不做区分,都可以使用:
var carname = "Porsche 911";
var carname = 'Porsche 911';
还可以在字符串中使用引号,只要不匹配围绕字符串的引号即可:
var answer = "It's good to see you again!";
var answer = "He is called 'Bill'";
var answer = 'He is called "Bill"';
字符串长度
内建属性 length 可返回字符串的长度:
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
返回结果:26;
特殊字符
由于字符串必须由引号包围,JavaScript会误解这段字符串:
var y = "中国是瓷器的故乡,因此 china 与"China(中国)"同名。"
该字符串将被切为 “中国是瓷器的故乡,因此 china 与”。
避免此问题的解决方法是,使用 \ 转义字符。
反斜杠转义字符把特殊字符转换为字符串字符:
代码 | 结果 | 描述 |
---|---|---|
’ | ’ | 单引号 |
" | " | 双引号 |
\ | \ | 反斜杠 |
解决方法:
var x = "中国是瓷器的故乡,因此 china 与\"China(中国)\"同名。"
其他的转义序列:
代码 | 结果 |
---|---|
\b | 退格键 |
\f | 换页 |
\n | 新行 |
\r | 回车 |
\t | 水平制表符 |
\v | 垂直制表符 |
长代码换行
为了最佳可读性,通常每行代码不会超过80个字符;
如果某条JavaScript语句不适合一整行,那么最佳换行位置是某个运算符之后:
document.getElementById("demo").innerHTML =
"Hello Kitty.";
你也可以在字符串中换行,通过一个反斜杠即可:
document.getElementById("demo").innerHTML = "Hello \
Kitty!";
\ 方法并不是 ECMAScript (JavaScript) 标准。
某些浏览器也不允许 `\ 字符之后的空格。
对长字符串换行的最安全做法(但是有点慢)是使用字符串加法:
document.getElementById("demo").innerHTML = "Hello" +
"Kitty!";
您不能通过反斜杠对代码行进行换行,否则将不能识别:
document.getElementById("demo").innerHTML = \
"Hello Kitty!";
字符串对象
通常,JavaScript字符串是原始值,通过字面方式创建:
var firstName = "Bill"
但是,字符串也可以通过关键词 new 定义为对象:
var firstName = new String("Bill")
var x = "Bill";
var y = new String("Bill");
// typeof x 将返回 string
// typeof y 将返回 object
请不要把字符串创建为对象。它会拖慢执行速度。
new
关键字使代码复杂化。也可能产生一些意想不到的结果:
当使用 == 相等运算符时,相等字符串是相等的:
var x = "Bill";
var y = new String("Bill");
// (x == y) 为 true,因为 x 和 y 的值相等
当使用 === 运算符时,相等字符串是不相等的,因为 === 运算符需要类型和值同时相等:
var x = "Bill";
var y = new String("Bill");
// (x === y) 为 false,因为 x 和 y 的类型不同(字符串与对象)
甚至会更糟糕,对象无法比较:
var x = new String("Bill");
var y = new String("Bill");
// (x == y) 为 false,因为 x 和 y 是不同的对象
var x = new String("Bill");
var y = new String("Bill");
// (x === y) 为 false,因为 x 和 y 是不同的对象
字符串方法
原始值,比如“Bill Gates”,无法拥有属性和方法(因为它们不是对象)。
但是通过 JavaScript,方法和属性也可用于原始值,因为在执行方法和属性时 JavaScript 将原始值视为对象。
length
返回字符串长度:
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
indexOf()
返回字符串中指定文本首次出现的索引(位置):
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
lastIndexOf()
返回指定文本在字符串中最后一次出现的索引:
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");
如果未找到文本, indexOf()
和 lastIndexOf()
均返回 -1。
两种方法都接受作为检索起始位置的第二个参数:
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);//即从第18开始检索
search()
搜索特定值的字符串,并返回匹配的位置:
var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");
indexOf()和search()的区别:
这两种方法是不相等的。区别在于:
- search() 方法无法设置第二个开始位置参数。
- indexOf() 方法无法设置更强大的搜索值(正则表达式)。
slice()
slice()
提取字符串的某个部分并在新字符串中返回被提取的部分。
该方法设置两个参数:起始索引(开始位置),终止索引(结束位置)。
这个例子裁剪字符串中位置 7 到位置 13 的片段:
var str = "Apple, Banana, Mango";
var res = str.slice(7,13);
res 的结果是:
Banana
如果省略第二个参数,则该方法将裁剪字符串的剩余部分:
var res = str.slice(7);
或者从结尾计数:
var res = str.slice(-13);
**提示:**负值位置不适用 Internet Explorer 8 及其更早版本。
substring()
substring()
类似于 slice()
。
不同之处在于 substring()
无法接受负的索引。
var str = "Apple, Banana, Mango";
var res = str.substring(7,13);
res 的结果是:
Banana
如果省略第二个参数,则该 substring()
将裁剪字符串的剩余部分。
substr()
substr()
类似于 slice()
。
不同之处在于第二个参数规定被提取部分的长度。
var str = "Apple, Banana, Mango";
var res = str.substr(7,6);
res 的结果是:
Banana
如果省略第二个参数,则该 substr() 将裁剪字符串的剩余部分。
var str = "Apple, Banana, Mango";
var res = str.substr(7);
res 的结果是:
Banana, Mango
如果首个参数为负,则从字符串的结尾计算位置。
var str = "Apple, Banana, Mango";
var res = str.substr(-5);
res 的结果是:
Mango
第二个参数不能为负,因为它定义的是长度。
replace()
用另一个值替换在字符串中的指定位置:
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");
//str会被替换为Please visit w3School!
replace()
方法不会改变调用它的字符串。它返回的是新字符串。
默认地,replace()
只匹配首个匹配:
str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3School");
//str将会被替换为Please visit w3School and Microsoft!
默认地,replace()
对大小写敏感。因此不会匹配 MICROSOFT:
str = "Please visit Microsoft!";
var n = str.replace("MICROSOFT", "W3School");
如需执行大小写不敏感的替换,请使用正则表达式 /i
(大小写不敏感):
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");
请注意正则表达式不带引号。
如需替换所有匹配,请使用正则表达式的 g
标志(用于全局搜索):
str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");
toUpperCase()
我们可以通过toUpperCase()把字符串转换为大写:
var text1 = "Hello World!"; // 字符串
var text2 = text1.toUpperCase(); // text2 是被转换为大写的 text1
toLowerCase()
我们可以通过toLowerCase()把字符串转换为小写:
var text1 = "Hello World!"; // 字符串
var text2 = text1.toLowerCase(); // text2 是被转换为小写的 text1
concat()
concat() 连接两个或多个字符串:
var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);
concat()
方法可用于代替加运算符。下面两行是等效的:
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");
所有字符串方法都会返回新字符串。它们不会修改原始字符串。
换句话说:字符串是不可变的,字符串只能替换,不能更改。
trim()
trim()方法删除字符串两端的空白符:
var str = " Hello World! ";
alert(str.trim());
注:Internet Explorer 8 或更低版本不支持 trim()
方法。
如需支持 IE 8,您可搭配正则表达式使用 replace()
方法代替:
var str = " Hello World! ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
我们还可以使用上面的 replace 方案把 trim 函数添加到 JavaScript String.prototype:
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
var str = " Hello World! ";
alert(str.trim());
charAt()
charAt()方法返回字符串中指定下标(位置)的字符串:
var str = "HELLO WORLD";
str.charAt(0); // 返回 H
charCodeAt()
charCodeAt()方法返回字符串中指定索引的字符 Unicode 编码:
var str = "HELLO WORLD";
str.charCodeAt(0); // 返回 72
属性访问(Property Access)
ECMAScript 5 (2009)允许对字符串的属性访问[ ]:
var str = "HELLO WORLD";
str[0]; // 返回 H
使用属性访问有点不太靠谱:
- 不适用 Internet Explorer 7 或更早的版本
- 它让字符串看起来像是数组(其实并不是)
- 如果找不到字符,
[ ]
返回undefined
,而charAt()
返回空字符串。 - 它是只读的。
str[0] = "A"
不会产生错误(但也不会工作!)
var str = "HELLO WORLD";
str[0] = "A"; // 不产生错误,但不会工作
str[0]; // 返回 H
**提示:**如果您希望按照数组的方式处理字符串,可以先把它转换为数组。
把字符串转换为数组
可以通过 split()
将字符串转换为数组:
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗号分隔
txt.split(" "); // 用空格分隔
txt.split("|"); // 用竖线分隔
如果省略分隔符,被返回的数组将包含 index [0] 中的整个字符串。
如果分隔符是 “”,被返回的数组将是间隔单个字符的数组:
var txt = "Hello"; // 字符串
txt.split(""); // 分隔为字符
字符串搜索
用于搜索字符串的 JavaScript 方法:
- String.indexOf()
- String.lastIndexOf()
- String.startsWith()
- String.endsWith()
indexOf(),lastIndexOf(),search()
这几个方法已经在之前的方法中讲过啦;
match()
match() 方法根据正则表达式在字符串中搜索匹配项,并将匹配项作为 Array 对象返回。
在字符串中搜索 “ain”:
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/g) // 返回数组 [ain,ain,ain]
如果正则表达式不包含 g 修饰符(执行全局搜索),match() 方法将只返回字符串中的第一个匹配项。
includes()
如果字符串包含指定值,includes()方法返回true;
let text = "Hello world, welcome to the universe.";
text.includes("world") // 返回 true
浏览器支持
Internet Explorer 不支持 String.includes()。
Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome 41 | Edge 12 | Firefox 40 | Safari 9 | Opera 28 |
2015 年 3 月 | 2015 年 7 月 | 2015 年 8 月 | 2015 年 10 月 | 2015 年 3 月 |
startsWith()
如果字符串以指定值开头,则startsWith()方法返回 true ,否则返回 false:
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // 返回 true
语法
string.startsWith(searchvalue, start)
参数值
参数 | 描述 |
---|---|
searchvalue | 必需。需要搜索的值。 |
start | 可选。默认为 0。开始搜索的位置。 |
例:
let text = "Hello world, welcome to the universe.";
text.startsWith("world") // 返回 false
let text = "Hello world, welcome to the universe.";
text.startsWith("world", 5) // 返回 false
let text = "Hello world, welcome to the universe.";
text.startsWith("world", 6) // 返回 true
注:startsWith()
方法区分大小写。
Internet Explorer 不支持 startsWith()
方法。
第一个完全支持的浏览器版本是:
Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome 41 | Edge 12 | Firefox 17 | Safari 9 | Opera 28 |
2015 年 3 月 | 2015 年 7 月 | 2015 年 8 月 | 2015 年 10 月 | 2015 年 3 月 |
endsWith()
如果字符串以指定值结尾,则 endsWith()
方法返回 true
,否则返回 false
:
检查字符串是否以 “Gates” 结尾:
var text = "Bill Gates";
text.endsWith("Gates") // 返回 true
语法
string.endsWith(searchvalue, length)
参数值
参数 | 描述 |
---|---|
searchvalue | 必需。需要搜索的值。 |
length | 可选。要搜索的长度。 |
字符串模板
Back-Tics语法
模板字面量使用反引号而不是引号来定义字符串:
let text = `Hello World!`;
字符串内的引号
通过使用模板字面量,你可以在字符串中同时使用单引号和双引号:
let text = `He's often called "Johnny"`;
多行字符串
模板字面量允许多行字符串:
let text =
`The quick
brown fox
jumps over
the lazy dog`;
插值
模板字面量提供了一种将变量和表达式插入字符串的简单方法:
该方法称为字符串插值(string interpolation)。
${...}
变量替换
模板字面量允许字符串中的变量:
let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;
用真实值自动替换变量称为字符串插值。
表达式替换
模板字面量允许字符串中的表达式:
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
用真实值自动替换表达式也称为字符串插值。
浏览器支持
Internet Explorer 不支持模板字面量。
第一个完全支持模板字面量的浏览器版本是:
Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome 41 | Edge 13 | Firefox 34 | Safari 10 | Opera 29 |
ng interpolation)。 |
${...}
变量替换
模板字面量允许字符串中的变量:
let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;
用真实值自动替换变量称为字符串插值。
表达式替换
模板字面量允许字符串中的表达式:
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
用真实值自动替换表达式也称为字符串插值。
浏览器支持
Internet Explorer 不支持模板字面量。
第一个完全支持模板字面量的浏览器版本是:
Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome 41 | Edge 13 | Firefox 34 | Safari 10 | Opera 29 |
2015 年 3 月 | 2015 年 11 月 | 2014 年 12 月 | 2016 年 9 月 | 2015 年 4 月 |