JavaScript String高阶用法

JavaScript String高阶用法

获取字符串长度（length属性）

在 JavaScript 中，使用字符串的 length 属性可以读取字符串的长度。长度以字符为单位，该属性为只读属性。

下面代码使用字符串的 length 属性获取字符串的长度。

var s = "String 类型长度"; //定义字符串
console.log(s.length); //返回10个字符

JavaScript 支持的字符包括单字节、双字节两种类型，为了精确计算字符串的字节长度，可以采用下面方法来计算。
字符串拼接/连接（3种方式）
使用加号运算符
连接字符串最简便的方法是使用加号运算符。
示例
下面代码使用加号运算符连接两个字符串。

var s1 = "abc" , s2 = "def";
console.log(s1 + s2); //返回字符串“abcdef”

使用concat()方法
使用字符串 concat() 方法可以把多个参数添加到指定字符串的尾部。该方法的参数类型和个数没有限制，它会把所有参数都转换为字符串，然后按顺序连接到当前字符串的尾部最后返回连接后的字符串。
示例
下面代码使用 concat() 方法把多个字符串连接在一起。

var s1 = "abc";
var s2 = s1.concat("d" , "e" , "f"); //调用concat()连接字符串
console.log(s2); //返回字符串“abcdef”

concat() 方法不会修改原字符串的值，与数组的 concat() 方法操作相似。
使用join()方法
在特定的操作环境中，也可以借助数组的 join() 方法来连接字符串，如 HTML 字符串输出等。
示例
下面代码演示了如何借助数组的方法来连接字符串。

var s = "JavaScript" , a = [];
for (var i = 0; i < 1000; i ++) {
a.push(s);
var str = a.join("");
a = null;
document.write(str);

在上面示例中，使用 for 语句把 1000 个 “JavaScript”字符串装入数组，然后调用数组的 join() 方法把元素的值连接成一个长长的字符串。使用完毕应该立即清除数组，避免占用系统资源。
字符串查找（6种方法）

字符串方法	说明
charAt()	返回字符串中的第 n 个字符
charCodeAt()	返回字符串中的第 n 个字符的代码
indexOf()	检索字符串
lastIndexOf()	从后向前检索一个字符串
match()	找到一个或多个正则表达式的匹配
search()	检索与正则表达式相匹配的子串

查找字符
使用字符串的 charAt() 和 chatCodeAt() 方法，可以根据参数（非负整数的下标值）返回指定位置的字符或字符编码。

对于 charAt() 方法来说，如果参数不在 0 和字符串的 length-1 之间，则返回空字符串；而对于 charCodeAt() 方法来说，则返回 NaN，而不是 0 或空字符串。
示例
下面示例为 String 类型扩展一个原型方法，用来把字符串转换为数组。在函数中使用 charAt() 方法读取字符串中每个字符，然后装入一个数组并返回。

String.prototype.toArray = function () { //把字符串转换为数组
var 1 = this.length; a = []; //获取当前字符串长度，并定义空数组
if (1) { //如果存在则执行循环操作，预防空字符串
for (var i = 0; i < 1; i ++) { //遍历字符串，枚举每个字符
a.push(this.charAt(i)); //把每个字符按顺序装入数组
}
}
return a; //返回数组
}

应用原型方法：

var s = "abcdefghijklmn".toArray(); //把字符串转换为数组
for (var i in s) { //遍历返回数组，显示每个字符
console.log(s[i]);
}

查找字符串

使用字符串的 indexOf() 和 lastIndexOf() 方法，可以根据参数字符串，返回指定子字符串的下标位置。这两个方法都有两个参数，说明如下。
第一个参数为一个子字符串，指定要查找的目标。
第二个参数为一个整数，指定查找的起始位置，取值范围是 0~length-1。
对于第二个参数来说，需要注意一下几个特殊情况。
如果值为负数，则视为 0，相当于从第一个字符开始查找。
如果省略了这个参数，也将从字符串的第一个字符开始查找。
如果值大于等于 length 属性值，则视为当前字符串中没有指定的子字符串，返回 -1。
示例1
下面代码查询字符串中首个字母 a 的下标位置。

var s = "JavaScript";
var i = s.indexOf("a");
console.log(i); //返回值为1，即字符串中第二个字符

indexOf() 方法只返回查找到的第一个子字符串的起始下标值，如果没有找到则返回 -1。
示例2
下面代码查询 URL 字符串中首个字母 n 的下标位置。

var s = "c.biancheng.net";
var a = s.indexOf("biancheng"); //返回值为3，即第一个字符n的下标位置

如果要查找下一个子字符串，则可以使用第二个参数来限定范围。
示例3
下面代码分别查询 URL 字符串中两个点号字符下标的位置。

var s = "c.biancheng.net";
var b = s.indexOf("."); //返回值为1，即第一个字符.的下标位置
var e = s.indexOf(".", b + 1); //返回值为11，即第二个字符.的下标位置

indexOf() 方法是按照从左到右的顺序进行查找的。如果希望从右到左来进行查找，则可以使用 lastIndexOf() 方法来查找。
示例4
下面代码按从右到左的顺序查询 URL 字符串中最后一个点号字符的下标位置。
var s = “c.biancheng.net”;
var n = s.lastIndexOf(“.”); //返回值为11，即第二个字符.的下标位置
lastIndexOf() 方法的查找顺序是从右到左但是其参数和返回值都是根据字符串的下标按照从左到右的顺序来计算的，即字符串第一个字符下标值始终都是 0，而最后一个字符的下标值始终都是 length-1。
示例6
lastIndexOf() 方法的第二个参数指定开始查找的下标位置，但是，将从该点开始向左查找，而不是向右查找。

var s = "http://c.biancheng.net";
var n = s.lastIndexOf(".", 11); //返回值是8，而不是18

其中第二个参数值 11 表示字符 a （第一个）的下标位置，然后从左侧开始向左查找，所以就返回第一个点号的位置。如果找到，则返回第一次找到的字符串的起始下标值。

var s = "http://c.biancheng.net";
var n = s.lastIndexOf("c"); //返回值为7

如果没有设置第二个参数，或者为参数负值，或者参数大于等于 length，则将遵循 indexOf() 方法进行操作。

搜索字符串

search() 方法和 indexOf() 的功能是相同的，查找指定字符串第一次出现的位置。但是 search() 方法仅有一个参数，定义匹配模式。该方法没有 lastIndexOf() 的反向检索功能，也不支持全局模式。
示例
下面代码使用 search() 方法匹配斜杠字符在 URL 字符串的下标位置。

var s = "c.biancheng.net";
n="s.search("//");"

search() 方法参数定义：
search() 方法的参数为正则表达式（RegExp 对象）。如果参数不是 RegExp 对象，则 JavaScript 会使用 RegExp() 函数把它转换为 RegExp 对象。
search() 方法遵循从左到右的查找顺序，并返回第一个匹配的子字符串的起始下标位置值。如果没有找到，则返回 -1。
search() 方法无法查找指定的范围，始终返回的第一个匹配子字符串的下标值，没有 indexOf() 方法灵活。

匹配字符串

match() 方法能够找出所有匹配的子字符串，并以数组的形式返回。
示例1
下面代码使用 match() 方法找到字符串中所有字母 c，并返回它们。

var s = "http://c.biancheng.net";
var a = s.match(/c/n); //全局匹配所有字符c
console.log(a); //返回数组[c,c]。

match() 方法返回的是一个数组，如果不是全局匹配，那么 match() 方法只能执行一次匹配。例如，下面匹配模式没有 n 的修饰符，只能够执行一次匹配，返回仅有一个元素 c 的数组。

var a = s.match(/c/); //返回数组[h]

如果没有找到匹配字符，则返回 null，而不是空数组。

当不执行全局匹配时，如果匹配模式包含子表达式，则返回子表达式匹配的信息。
示例2
下面代码使用 match() 方法匹配 URL 字符串中所有点号字符。

var s = "http://c.biancheng.net";
var a = s.match(/(\.).*(\.).*(\.)/ ); //执行一次匹配检索
console.log(a.length);
console.log(a[0]);
console.log(a[1]);
console.log(a[2]);
console.log(a[3]);

在这个正则表达式 “/(\.).*(\.).*(\.)/”中，左右两个斜杠是匹配模式分隔符，JavaScript 解释器能够根据这两个分隔符来识别正则表达式。在正则表达式中小括号表示子表达式，每个子表达式匹配的文本信息会被独立存储。点号需要转义，因为在正则表达式中它表示匹配任意字符，星号表示前面的匹配字符可以匹配任意多次。

在上面示例中，数组 a 包含 4 个元素，其中第一个元素存放的是匹配文本，其余元素存放的是每个正则表达式的子表达式匹配的文本。

另外，返回的数组还包含两个对象属性，其中 index 属性记录匹配文本的起始位置，input 属性记录的是被操作的字符串。

console.log(a.index);
console.log(a.input);

在全局匹配模式下，match() 将执行全局匹配。此时返回的数组元素存放的是字符串中所有匹配文本，该数组没有 index 属性和 input 属性；同时不再提供子表达式匹配的文本信息，也不提示每个匹配子串的位置。如果需要这些信息，可以使用 RegExp.exec() 方法。

截取字符串（3种方法）

String 定义了 3 个字符串截取的原型方法，说明如表所示。

字符串方法	说明
slice()	抽取一个子串
substr()	抽取一个子串
substring()	返回字符串的一个子串

截取指定长度字符串

substr() 方法能够根据指定长度来截取子字符串。它包含两个参数，第一个参数表示准备截取的子字符串起始下标，第二个参数表示截取的长度。
示例
在下面示例中使用 lastIndexOf() 获取字符串的最后一个点号的下标位置，然后从其后的位置开始截取 4 个字符。

var s = "http://c.biancheng.net/index.html";
var b = s.substr(s.lastIndexOf(".") + 1,4); //截取最后一个点号后4个字符
console.log(b); //返回子字符串“html”

如果省略第二个参数，则表示截取从起始位置开始到结尾的所有字符。考虑到扩展名的长度不固定，省略第二个参数会更灵活。

var b = s.substr(s.lastIndexOf(".") + 1);

如果第一个参数为负值，则表示从字符串的尾部开始计算下标位置，即 -1表示最后一个字符，-2 表示倒数第二个字符，以此类推。这对于左侧字符长度不固定时非常有用。

ECMAScript 不再建议使用该方法，推荐使用 slice() 和 substring() 方法。
截取起止下标位置字符串
slice() 和 substring() 方法都是根据指定的起止下标位置来截取字符串，它们都可以包含两个参数，第一个参数表示起始下标，第二个参数表示结束下标。
示例1
下面代码使用 substring() 方法截取 URL 字符串中网站主机名信息。

var s = "http://c.biancheng.net/index.html";
var a = s.indexOf("c");
var b = s.indexOf("/", a);
var c = s.substring(a,b);
var d = s.slice(a,b);

截取的字符串包含第一个参数所指定的字符。结束点不被截取，即不包含在字符串。
第二个参数如果省略，表示截取到结尾的所有字符串。

如果第一个参数值比第二个参数值大，substring() 方法能够在执行截取之前先交换两个参数，而对于 slice() 方法来说，则被无视为无效，并返回空字符串。
示例2
下面代码比较 substring() 方法和 slice() 方法用法不同。

var s = "http://c.biancheng.net/index.html";
var a = s.indexOf("c");
var b = s.indexOf("/", a);
var c = s.substring(b, a);
var d = s.slice(b, a);

当起始点和结束点的值大小无法确定时，使用 substring() 方法更合适。
如果参数值为负值，slice() 方法能够把负号解释为从右侧开始定位，这与 Array 的 slice() 方法相同。但是 substring() 方法会视其为无效，并返回空字符串。
示例3
下面代码比较 substring() 方法和 slice() 方法的用法不同。

var s = "http://c.biancheng.net/index.html";
var a = s.indexOf("c");
var b = s.indexOf("/", a);
var 1 = s.length;
var c = s.substring(a-1, b-1);
var d = s.slice(a-1, b-1);

字符串替换（使用replace()方法）

replace() 方法的第二个参数可以使用函数，当匹配时会调用该函数，函数的返回值将作为替换文本使用，同时函数可以接收以$为前缀的特殊字符，用来引用匹配文本的相关信息。

约定字符串	说明
$1、$2、…、$99	与正则表达式中的第 1~99 个子表达式相匹配的文本
$&（美元符号+连字符）	与正则表达式相匹配的子字符串
$’（美元符号+切换技能键）	位于匹配子字符串左侧的文本
$’（美元符号+单引号）	位于匹配字符串右侧的文本
$$	表示 $ 字符串

示例1
下面代码把字符串中每个单词转换为首字母大写形式显示。

var s = 'javascript is script , is not java.'; //定义字符串
//定义替换文本函数，参数为第一个子表达式匹配文本
var f = function ($1) {
//把匹配文本的首字母转换为大写
return $1.substring(0,1).toUpperCase() + $1.substring(1).toLowerCase();}
var a = s.replace(/(\b\w+\b)/g, f); //匹配文本并进行替换
console.log(a); //返回字符串“JavaScript Is Script ， Is Not Java.”

在上面示例中替换函数的参数为特殊字符“$1”，它表示正则表达式 /(\b\w+\b)/ 中小括号匹配的文本，然后在函数结构内对这个匹配文本进行处理，截取其首字母并转换为大写形式，余下字符全为小写，然后返回新处理的字符串。replace() 方法是在原文本中使用这个返回的新字符串替换掉每次匹配的子字符串。
示例2
对于上面的示例还可以进一步延伸，使用小括号来获取更多匹配信息。例如，直接利用小括号传递单词的首字母，然后进行大小写转换处理，处理结果都是一样的。

var s = 'javascript is script , is not java.'; //定义字符串
var f = function ($1,$2,$3) { //定义替换文本函数，请注意参数的变化
return $2.toUpperCase() + $3;
}
var a = s.replace(/(\b\w+\b)/g, f);
console.log(a);

在函数 f() 中，第一个参数表示每次匹配的文本，第二个参数表示第一个小括号的子表达式所匹配的文本，即单词的首字母，第二个参数表示第二个小括号的子表达式所匹配的文本。

replace() 方法的第二个参数是一个函数，replace() 方法会给它传递多个实参，这些实参都包含一定的意思，具体说明如下。
第一个参数表示与匹配模式相匹配的文本，如上面示例中每次匹配的单词字符串。
其后的参数是与匹配模式中子表达式相匹配的字符串，参数个数不限，根据子表达式数而定。
后面的参数是一个整数，表示匹配文本在字符串中的下标位置。
最后一个参数表示字符串自身。
示例3
把上面示例中替换文本函数改为如下形式。

var f = function() {
return arguments[1].toUpperCase() + arguments[2];
}

也就是说，如果不为函数传递形参，直接调用函数的 arguments 属性同样能够读取到正则表达式中相关匹配文本的信息。其中：
arguments[0]：表示每次匹配的文本，即单词。
arguments[1]：表示第一个子表达式匹配的文本，即单词的首个字母。
arguments[2]：表示第二个子表达式匹配的文本，即单词的余下字母。
arguments[3]：表示匹配文本的下标位置，如第一个匹配单词“javascript”的下标位置就是0，以此类推。
arguments[4]：表示要执行匹配的字符串，这里表示“javascript is script , is not java.”。
示例4
下面代码利用函数的 arguments 对象主动获取 replace() 方法的第一个参数中正则表达式所匹配的详细信息。

var s = 'javascript is script , is not java.'; //定义字符串
var f = function () {
for (var i = 0; i < arguments.length; i++) {
console.log("第" + (i + 1) + "个参数的值："+ arguments[i]);
}
console.log("-----------------------------");
}
var a = s.replace(/(\b\w+\b)/g, f);

在函数结构体中，使用 for 循环结构遍历 arguments 属性时，发现每次匹配单词时，都会弹出 5 次提示信息，分别显示上面所列的匹配文本信息。其中，arguments[1]、arguments[2] 会根据每次匹配文本的不同，分别显示当前匹配文本中子表达式匹配的信息，arguments[3] 显示当前匹配单词的下标位置。而 arguments[0] 总是显示每次匹配的单词，arguments[4] 总是显示被操作的字符串。
示例5
下面代码设计从服务器端读取学生成绩（JSON格式），然后使用 for 语句把所有数据转换为字符串。再来练习自动提取字符串中的分数，并汇总、算出平均分。最后，利用 replace() 方法提取每个分值，与平均分进行比较以决定替换文本的具体信息。

var scope = {
"张三" : 56,
"李四" : 76,
"王五" : 87,
"赵六" : 98
}, _scope = "";
for (var id in scope) { //把JSON数据转换为字符串
_scope += id + scope[id];
}
var a = _scope.match(/\d+/g), sum = 0; //匹配出所有分值，输出位数组
for (var i = 0; i <a.length; i++) { //遍历数组，求总分
sum += parseFloat(a[i]); //把元素值转换为数值后递加
};
var avg = sum / a.length; //求平均分
function f() {
var n = parseFloat(arguments[1]); //把匹配的分数转换为数值，第一个子表达式
return "：" + n + "分" + "(" + ((n > avg) ? ("超出平均分" + (n - avg)) :
("低于平均分" + (avg - n))) + "分)<br>"; //设计替换文本的内容
}
var s1 = _scope.replace(/(\b\w+\b)/g, f); //执行匹配、替换操作
document.write(s1);

运行结果如下：

遍历数组时不能使用 for/in 语句因为数组中还存储有其他相关的匹配文本信息。应该使用 for 结构来实现。由于截取的数字都是字符串类型，应该把它们都转换为数值类型，再把数字连接在一起，或者按字母顺序进行比较等。
字符串大写和小写之间的转换（4种方法）
String 定义了 4 个原型方法实现字符串大小写转换操作，说明如表所示。

字符串方法	说明
toLocaleLowerCase()	把字符串转换成小写
toLocaleUpperCase()	将字符串转换成大写
toLowerCase()	将字符串转换成小写
toUpperCase()	将字符串转换成大写

下面代码把字符串全部转换成大写形式。

var s = "JavaScript";
console.log(s.toUpperCase()); //返回字符串“JAVASCRIPT”

toLocaleLowerCase() 和 toLocaleUpperCase() 是两个本地化原型方法。它们能够按照本地方式转换大小写字母，由于只有几种语言（如土耳其语）具有地方特有的大小写映射，所以通常与 toLowerCase() 和 toUpperCase() 方法的返回值一样。

字符串比较大小

JavaScript 能够根据字符的 Unicode 编码大小逐位比较字符串大小。
直接比较字符串大小
在 JavaScript 中，可以直接使用 >、<、 = = 、=== 来比较两个字符串的大小，就像比较两个数字一样。

例如，小写字母 a 的编码为 97，大写字母 A 的编码为 65，则字符“a”就大于“A”。

console.log("a" > "A"); //返回true

再如，“中国人”的 Unicode 编码是 \u4e2d\u56fd\u4eba，“编程语言”的编码是 \u7f16\u7a0b\u8bed\u8a00，因为 \u4e2d 小于 \u7f16，所以“中国人”就小于“编程语言”。
console.log(“中国人”<”编程语言”); //返回true
使用 localeCompare() 方法
使用字符串的 localeCompare() 方法，可以根据本地约定顺序来比较两个字符串的大小。ECMAScript 标准没有规定如何进行本地化比较操作。

localeCompare() 方法包含一个参数，指定要比较的目标字符串。如果当前字符串小于参数字符串，则返回小于 0 的数；如果大于参数字符串，则返回大于 0 的数；如果两个字符串相等，或与本地排序约定没有区别，则该方法返回 0。

【实例】下面代码把字符串“JavaScript”转换为数组，然后按本地字符顺序进行排序。

var s = "JavaScript"; //定义字符串直接量
var a = s.split(""); //把字符串转换为数组
var s1 = a.sort(function (a, b)) { //对数组进行排序
return a.localeCompare(b); //将根据前后字符在本地的约定进行排序
});
a = s1.join(""); //然后再把数组还原为字符串
console.log(a); //返回字符串“aaciJprStv”

字符串和数组之间的转换

使用字符串的 split() 方法可以根据指定的分隔符把字符串切分为数组。

如果使用数组的 join() 方法，可以把数组元素连接为字符串。
示例1
如果参数为空字符串，则 split() 方法能够按单个字符进行切分，然后返回与字符串等长的数组。

var s = "JavaScript";
var a = s.split(""); //按字符空隙分隔
console.log(s.length); //返回值为10
console.log(a.length); //返回值为10

示例2
如果参数为空，则 split() 方法能够把整个字符串作为一个元素的数组返回。

var s = "JavaScript";
var a = s.split(""); //空分隔
console.log(a.constructor == Array); //返回true，说明Array是实例
console.log(a.length); //返回值为1，说明没有对字符串进行分割

示例3
如果参数为正则表达式，则 split() 方法能够以匹配文本作为分隔符进行切分。

var s = "a2b3c4d5e678f12g";
var a = s.split(/\d+/); //把以匹配的数字为分隔符来切分字符串
console.log(a); //返回数组[a,b,c,d,e,f,g]
console.log(a.length); //返回数组长度为7

示例4
如果正则表达式匹配的文本位于字符串的边沿，则 split() 方法也执行切分操作，且为数组添加一个空数组。

var s = "122a2b3c4d5e678f12g";
var a = s.aplit(/\d+/);
console.log(a);
console.log(a.length);

如果在字符串中指定的分隔符没有找到，则返回一个包含整个字符串的数组。
示例5
split() 方法支持第二个参数，该参数是一个可选的整数，用来指定返回数组的最大长度。如果设置了该参数，则返回的数组长度不会大于这个参数指定的值；如果没有设置该参数，那么整个字符串都被分割，不会考虑数组长度。

var s = "JavaScript";
var a = s.split("", 4); //按顺序从左到右，仅分切4个元素的数组
console.log(a); //返回数组[J,a,v,a]
console.log(a.length); //返回值为4

示例6
如果想使返回的数组包括分隔符或分隔符的一个或多个部分，可以使用带子表达式的正则表达式来实现。

var s = "aa2bb3cc4dd5e678f12g";
var a = s.split(/(\d)/); //使用小括号包含数字分隔符
console.log(a); //返回数组[aa,2,bb,3,cc,4,dd,5,e,6,,7,,8,f,1,,2,g]

去除字符串前后空格

ECMAScript 5 为 String 新增了 trim() 原型方法，用以从字符串中去除前导空字符、尾随空字符和行终止符。该方法在表达处理中非常实用。

空字符包括：空格、制表符、换页符、回车符和换行符。
示例
下面代码使用 trim() 方法快速清除掉字符串首尾空格。

var s = " abc def \r\n ";
s = s.trim();
console.log("[" + s + "]"); //[abc def]
console.log(s.length); //7

字符串分割

字符串分割，即将一个字符串分割为多个字符串，JavaScript中给我们提供了一个非常方便的函数split()，如：
示例l

var myStr = "I,Love,You,Do,you,love,me";
var substrArray = myStr .split(",");
// ["I", "Love", "You", "Do", "you", "love", "me"];
var arrayLimited = myStr .split(",", 3);
// ["I", "Love", "You"];split()的第二个参数，表示返回的字符串数组的最大长度。

三元运算符

三元运算符又称为三目运算符，指的是根据不同的条件，执行不同的操作/返回不同的值。
语法结构为：条件 ？ 操作1 ： 操作2。 如果条件为真，执行操作1，否则执行操作2。
示例一

var even = (n % 2 === 0) ? true : false;

上面代码中，如果n可以被2整除，则even等于true，否则等于false。它等同于下面的形式。
示例二

var msg = '数字' + n + '是' + (n % 2 === 0 ? '偶数' : '奇数');

上面代码利用三元运算符，在字符串之中插入不同的值。
示例

(条件) ? 表达式1 : 表达式2 ? 表达式3 : 表达式4;
// 如果条件为真执行表达式1，为假执行表达式2，如果表达式2为真，则执行表达式3，为假则执行表达式4