JavaScript字符串及其方法

JavaScript字符串及其方法

---

JavaScript字符串

• JavaScript字符串用于存储和操作文本。

字符串长度

• 内建属性length可返回字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

sln 的值是26

特殊字符

• 由于字符串必须由引号包围，JavaScript会误解字符串中的引号。
• 为了避免这种现象，使用\转义字符。
• 反斜杠转义字符把特殊字符转换为字符串字符：

代码	结果	描述
\'	'	单引号
\"	"	双引号
\\	\	反斜杠

• 其他六个在JavaScript中有效的转义字符：

代码	描述
\b	退格键
\f	换行
\n	新行
\r	回车
\t	水平制表符
\v	垂直制表符

这六个转义字符最初设计用于控制打字机和传真机。它们在HTML中没有任何意义。

字符串可以是对象

• 通常，JavaScript字符串是原始值，通过字面方式创建：

var firstName = "Tom"	//typeof first返回String

• 但是字符串也可以通过关键词new定义为对象：

var firstName = new String("Tom")	//typeof first返回object	

请不要把字符串创建为对象，它会拖慢执行速度还会有很多意想不到的结果。

• new关键词使代码复杂化。
• 当使用==相等运算符时，相等字符串是相等的：👇

var x = "Tom";
var y = new String("Tom");

// (x == y)为true，因为x和y的值相等

• 当使用===运算符时，相等字符串是不相等的，因为===运算符需要类型和值同时相等：👇

var x = "Tom";
var y = new String("Tom");

// （x === y）为false，因为x和y的类型不同（字符串与对象）

• 对象无法比较：👇

var x = new String("Tom");
var y = new String("Tom");

// (x == y)为false，因为x和y是不同的对象
// (x === y)为false，因为x和y是不同的对象

请注意(x == y)与(x === y)的区别
JavaScript对象无法进行对比，比较两个JavaScript对象始终返回false。

---

字符串方法

字符串长度

• length属性返回字符串的长度

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

sln 的值是26

查找字符串中的字符

indexOF()

• indexOf()方法返回字符串中指定文本首次出现的索引（位置）：

var str ="加油中国 加油武汉！";
var pos = str.indexOf("中国");

pos 的值是：2

• JavaScript的位置从零计算。

lastIndexOf()

• lastIndexOf()方法返回指定文本在字符串中最后一次出现的索引（位置）：

var str ="加油中国 加油武汉 中国必胜";
var pos = str.lastIndexOf("中国");

pos 的值是：10

如果为找到文本，indexOf()和lastIndexOf()均返回-1

• 两种方法都接受作为检索起始位置的第二个参数。
  • indexOf()方法使用时，代表从参数位置到结束。
  • lastIndexOf()方法使用时，代表从参数位置到开头。

检索字符串中的字符串

• search()方法搜索特定值的字符串，并返回匹配的位值：

var str ="加油中国 加油武汉 中国必胜";
var pos = str.search("中国");

pos 的值是：2

• 我们发现，indexOf()和search()两种方法是相等的。
• 其实这两种方法是不相等的。区别在于：
  • search()方法无法设置第二个开始位置的参数。
  • indexOf()方法无法设置正则表达式的搜索值。

提取部分字符串

• 提取部分字符串有三种方法：
  • slice(start,end)
  • substring(start,end)
  • substr(start,length)

slice()方法

• slice()提取字符串的某个部分在新字符串中返回被提取的部分。
• 该方法有两个参数：起使索引（开始的位置），终止索引（结束的位置）。
• 例子：裁剪字符串中位置7到位置13的片段👇

var str = "Apple, Banana, Orange";
var res = str.slice(7,13);

res 的值是：Banana

• 如果某个参数为负，则从字符串的结尾开始计数。
• 例子：裁剪字符串中位置-13到位置-7的片段👇

var str = "Apple, Banana, Orange";
var res = str.slice(-14,-8);

res 的值是：Banana

• 如果省略第二个参数，则该方法将裁剪字符串的剩余部分：

var res = str.slice(7);

• 或者从结尾计数：

var res = str.slice(-13);

负值位置不适用IE8及其更早版本。

substring()方法

• substring()类似于slice()。
• 不同之处在于substring()无法接受负的索引。

var str = "Apple, Banana, Orange";
var res = str.substring(7,13);

res 的结果是：Banana

• 如果省略第二个参数，则该substring()将裁剪字符串的剩余部分。

substr()方法

• substr()类似于slice()。
• 不同之处在于第二个参数规定被提取部分的长度。

var str = "Apple, Banana, Orange";
var res = str.substr(7,6);

res 的结果是：Banana

• 如果省略第二个参数，则该substr()将裁剪字符串的剩余部分。

var str = "Apple, Banana, Orange";
var res = str.substr(7);

res 的结果是：Banana, Orange

• 如果首个参数为负，则从字符串的结尾计算位置。
• 第二个参数不能为负，因为它定义的是长度。

替换字符串内容

• replace()方法用另一个值替换在字符串中指定的值：

var str = "武汉加油，中国加油";
var n = str.replace("加油","胜利");

n 的结果是：武汉胜利，中国加油

• replace()方法不会改变调用它的字符串。它返回的是新的字符串。
• 默认地，replace()只替换首个匹配：
• 默认的，replace()对大小写敏感，所以参数必需与要替换文本一致。
• 如果需要执行大小写不敏感的替换，请使用正则表达式/i（大小写不敏感）：👇

var str = "Welcome to China."
var n= str.replace(/CHINA/i,"Beijing");

n 的结果是：Welcome to Beijing.
请注意！正则表达式不带引号。

• 如果需要替换所有匹配，请使用正则表达式/g标志（用于全局搜索）：👇

var str = "武汉加油，中国加油";
var n = str.replace(/加油/g,"胜利");

n 的结果是：武汉胜利，中国胜利

转换为大写和小写

• 通过toUpperCase()把字符串转换为大写。
• 通过toLowerCase()把字符串转换为小写。

var text = "Hello World!";

var x = text.toUpperCase();
var y = text.toLowerCase();

x 的结果是：HELLO WORLD！
y 的结果是：hello world！

concat()方法

• concat()方法连接两个或多个字符串：

var text1 = "加油武汉";
var text2 = "加油湖北";

var text3 = text1.concat(" ",text2);
var text4 = text1 + " " + text2;

text3 的结果是：加油武汉 加油湖北
text4 的结果是：加油武汉 加油湖北

• concat()方法可用于代替加运算符。两者是等效的。

所有字符串方法都会返回新字符串。它们不会修改原始字符串。

• 正式地说：字符串是不可变的：字符串不能改变，只能替换。

String.trim()

• trim()方法删除字符串两端的空白符。
• IE8或更低版本不支持trim()方法，我们可以搭配正则表达式使用replace()方法代替。

var str = "			Hello World!			";

// trim()方法
alert(str.trim());
// 正则表达式+replace()方法
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

• 使用属性访问有点不太靠谱
  • 不适用IE7或更早的版本
  • 它让字符串看起来像是数组（其实并不是）
  • 如果找不到字符，[]返回undefined，而charAt()返回空字符串。
  • 它是只读的。str[0] = "A"不会产生错误（但也不会工作！）
• 如果我们希望按照数组的方式处理字符串，我们可以先把它转换为数组。

把字符串转换为数组

• 我们可以通过split()将字符串转换为数组：

var text = "a,b,c,d,e";	//字符串
text.split(",");			//用逗号分隔
text.split(" ");			//用空格分隔
text.split("|");			//用竖线分隔

• 如果省略分隔符，被返回的数组将包含index[0]中的整个字符串。
• 如果分隔符是"",被返回的数组将是间隔单字的数组。