JavaScript字符串API全解密

JavaScript字符串API全解密

charAt

charAt()方法返回字符串中指定位置的字符

语法：str.chartAt(index)

index为字符串索引（取值从 0 至 length - 1）,如果超出范围，则返回空串

'123456'.charAt(3) // 输出4

charCodeAt

charCodeAt()返回指定索引处字符的Unicode数值

语法：str.charCodeAt(index)

index为一个从0 至length-1的整数。如果不是一个数值，则默认为0，如果小于0 或者大于字符串长度，则返回NaN

Unicode编码单元code points的范围从 0 到 1,114,111 .开头的 128个Unicode编码单元和ASCLL字符编码一样

concat

concat()方法将一个或多个字符串拼接在一起，组成新的字符串并返回

语法：str.concat(string1,string2)

'早'.concat('上','好')

但是 concat性能表现不佳，推荐使用 赋值操作符 （+ 或 +=）代替concat。‘+’操作符大概快了concat几十倍

indexOf lastIndexOf

indexOf()方法用于查找子字符串在字符串中首次出现的位置，没有则返回 -1.该方法严格区分大小写，并且从左往右查找。而lastIndexOf则从右往左查找，其他与前者一致

语法：str.indexOf(searchValue [,fromIndex=0])

​ str.lastIndexOf(searchValue [,fromIndex=0])

searchValue表示被查找的字符串，fromIndex表示开始查找的位置，默认为0，如果小于0，则查找整个字符串，若超过字符串长度，则该方法返回 -1，除非被查找的是空字符串，此时返回字符串长度

console.log("".indexOf("",100)); // 0
console.log("IT改变世界".indexOf("世界")); // 4
console.log("IT改变世界".lastIndexOf("世界")); // 4

**俩者之间的区别：**也就是查找的顺序不同

• indexOf：从左查找某个字符串在字符串首次出现的位置
• lastIndexOf：从右查找某个字符串在字符串中最后一次出现的位置

match

match() 方法用于测试字符串是否支持指定正则表达式的规则，即使传入的是非正则表达式对象，它也会隐式地使用new RegExp(obj)将其转换为正则表达式对象。

语法：str.match(regexp)

该方法返回包含匹配结果的数组，如果没有匹配项，则返回 null。

描述

• 若正则表达式没有 g 标志，则返回同 RegExp.exec(str) 相同的结果。而且返回的数组拥有一个额外的 input 属性，该属性包含原始字符串，另外该数组还拥有一个 index 属性，该属性表示匹配字符串在原字符串中索引（从0开始）。
• 若正则表达式包含 g 标志，则该方法返回一个包含所有匹配结果的数组，没有匹配到则返回 null。

相关 RegExp 方法

• 若需测试字符串是否匹配正则，请参考 RegExp.test(str)。
• 若只需第一个匹配结果，请参考 RegExp.exec(str)。

var str = "World Internet Conference";
console.log(str.match(/[a-d]/i)); // ["d", index: 4, input: "World Internet Conference"]
console.log(str.match(/[a-d]/gi)); // ["d", "C", "c"]
// RegExp 方法如下
console.log(/[a-d]/gi.test(str)); // true
console.log(/[a-d]/gi.exec(str)); // ["d", index: 4, input: "World Internet Conference"]
123456

由上可知，RegExp.test(str) 方法只要匹配到了一个字符也返回true。而RegExp.exec(str) 方法无论正则中有没有包含 g 标志，RegExp.exec将直接返回第一个匹配结果，且该结果同 str.match(regexp) 方法不包含 g 标志时的返回一致。

replace

该方法并不改变调用他的字符串本身，而只是返回替换后得字符串

语法：str.replace(regexp|substr , newSubStr | function[,flags])

• regexp:一个RegExp对象，该正则所匹配得内容会被第二个参数得返回值替换掉
• substr:一个要被newSubStr替换的字符串
• newSubStr:替换掉第一个参数在元字符串中的匹配位置
• function:一个用来创建新子字符串的函数，该函数的返回值将替换掉第一参数匹配到的结果
• flags:flags参数在v8内核中不起作用，方法中使用flags参数不是符合标准的

简单概括,replace拥有两个参数,第一个是需要替换的字符串或者正则表达式;

第二个是新的字符串或者一个function,这样参数便有四种组合.

1.一般来说我们使用JS String对象的replace方法的姿势是这个样子:

match1: String–>String

var a = "what is this? before";
var b = a.replace("before","after");
console.log(b);    // "what is this? after"
123

仅仅用到了文本替换为文本的功能.

2.更高级些还可以摆出这样的姿势,如果第一个参数是正则表达式,新的字符串中可以用$符号取正则中匹配的子串(也就是正则中被括号包裹的部分):

match2: Regexp–>String

var a = "what is this? before";
var b = a.replace(/(^\w+).*?(\w+)$/,"$2 $1");//括号分割的部分依次为子串1....n
console.log(b); // "before what"
123

3.依照语法,第二个参数其实可为一个function,最终字符串将以function的返回值作为replace的返回值,以下是该function的形参:
function(match,p1…,offset,string),可见至少包含三个形参(即arguments.length>=3)

match3: Regexp–>Function

• match表示第一个参数(整个正则表达式)匹配的字符串
• p1至pn表示第1…n个括号匹配的字符串,如果没有括号则不存在该项
• offset表示匹配的起点在原字符串中的偏移
• string表示原字符串

function replacer(match,p1,p2,offset,string){
    //此时p1=" is",p2=" this"
    return p1+" that";//如果返回为空串,则匹配内容替换为空,如果不返回,则匹配内容替换为undefined
}
var a = "what is this? before";
var b = a.replace(/(\s\w+)(\s\w+)/,replacer);
console.log(b); // "what is that? before"
1234567

4.这里还有一种搭配,str.replace( substr, function[, flags] )

match4: String–>Function

function replacer(match,offset,string){
    //由于字符串中不会有括号进行分组,此时没有子串
    return offset+" that";//偏移为4
}
var a = "what is this? before";
var b = a.replace(" is this",replacer);
console.log(b); // "what4 that? before"
1234567

以上4种replace使用方法可以满足大部分的操作字符串场景,特别是function的引入,极大的增强了replace的实力,从而使得我们操作字符游刃有余.

search

search()方法用于测试字符串对象是否包含某个正则匹配，相当于正则表达式的test方法，且该方法比match()方法更快。如果匹配成功，search()返回则很难规则表达式在字符串中首次匹配项的索引，否则返回-1

注意：search方法与indexOf方法作用基本一致，都是查询到了就返回子串第一次出现的下标，否则返回-1，唯一的区别就在于search默认会将子串转化为正则表达式形式，而indexOf不做此处理，也不能处理正则。

语法:str.search(regexp)

var str = "abcdefg";
console.log(str.search(/[d-g]/)); // 3, 匹配到子串"defg",而d在原字符串中的索引为3

search()方法不支持全局匹配（正则中包含g函数），如下：

console.log(str.search(/[d-g]/g)); // 3, 与无g参数时,返回相同

slice(切片)

slice()提取字符串的一部分，并返回新的字符串

语法：str.slice(start,end)

end参数可选，start可取正值，也可取负值

取正值时表示从索引为start得位置截取到end得位置（不包括end所在位置得字符，如果end省略则截取到字符串末尾）

取负值时表示从索引为length + start位置截取到end所在位置得字符

var str = "It is our choices that show what we truly are, far more than our abilities.";
console.log(str.slice(0,-30)); // It is our choices that show what we truly are
console.log(str.slice(-30)); // , far more than our abilities.
//包括空格

split(分裂)

split()方法把原字符串分割成字符串组成数组，并返回数组

语法：str.split(separator,limit)

俩个参数均是可选得，其中separator表示分隔符，他可以是字符串也可以是正则表达式。如果忽略separator，则返回得数组包含一个又源自哦夫组成得元素。如果separator是一个空串，则str将会被分割成一个由原字符串中字符组成得数组，limit表示从返回得数组中截取前limit个元素，从而限定返回得数组长度

var str = "today is a sunny day";
console.log(str.split()); // ["today is a sunny day"]
console.log(str.split("")); // ["t", "o", "d", "a", "y", " ", "i", "s", " ", "a", " ", "s", "u", "n", "n", "y", " ", "d", "a", "y"]
console.log(str.split(" ")); // ["today", "is", "a", "sunny", "day"]

使用limit限定返回得数组大小，如下：

str.split(' ',1) // ["today"]

使用正则分隔符RegExp separator，如下：

console.log(str.split(/\s*is\s*/)); // ["today", "a sunny day"]

若正则分隔符里包含捕获括号，则括号匹配得结果将会包含在返回得数组中

console.log(str.split(/(\s*is\s*)/)); // ["today", " is ", "a sunny day"]

substr

substr()方法在返回字符串指定位置开始的指定数量的字符

语法：str.substr(start[,length])

start表示开始截取字符的位置，可取正值或负值。取正值时表示start位置的索引，取赋值时表示length + start位置的索引

var str = "Yesterday is history. Tomorrow is mystery. But today is a gift.";
console.log(str.substr(47)); // today is a gift.
console.log(str.substr(-16)); // today is a gift.

substring

substring()方法返回字符串俩个索引之间的子串

语法：str.substring(indexA[,indexB])

indexA、indexB表示字符串索引，其中indexB可选，如果省略，则表示返回从indexA到字符串末尾的子串

描述

substring要截取的时从indexA到indexB(不包含)之间的字符，符合以下规律：

• 若indexA == indexB,则返回一个空字符串
• 若省略indeB,则提取字符一直到字符串末尾
• 若任一参数小于0或NaN,则被当作0
• 若任一参数大于 length，则被当作length
• 而如果indexA > indexB,则substring的执行效果就像是俩个参数调换一般。比如：str.substring(0,1) == str.substring(1,0)

var str = "Get outside every day. Miracles are waiting everywhere.";
console.log(str.substring(1,1)); // ""
console.log(str.substring(0)); // Get outside every day. Miracles are waiting everywhere.
console.log(str.substring(-1)); // Get outside every day. Miracles are waiting everywhere.
console.log(str.substring(0,100)); // Get outside every day. Miracles are waiting everywhere.
console.log(str.substring(22,NaN)); // Get outside every day.

substr substring 俩者之间的区别

区别在于：第二参数

• substr第二参数是获取子字符串的长度，substr可以为负数
• substring第二个参数是获取子字符串的结束位置，substring第二参数为负数时候，会被当做 0 处理

toLowerCase toUpperCase

这俩个方法分别表示将字符串转换为相应的小写、大写形式，并返回

console.log('ABCDEFG'.toLowerCase()); // abcdefg
console.log('abcdefg'.toUpperCase()); // ABCDEFG

toString valueOf

这俩个方法都是返回字符串本身

语法： str.toString() str.valueOf()

var str = "abc";
console.log(str.toString()); // abc
console.log(str.toString()==str.valueOf()); // true

对于对象而言，toString 和 valueOf也是非常的相似，它们之间有着细微的差别。

var x = {
    toString: function () { return "test"; },
    valueOf: function () { return 123; }
};

console.log(x); // test
console.log("x=" + x); // "x=123"
console.log(x + "=x"); // "123=x"
console.log(x + "1"); // 1231
console.log(x + 1); // 124
console.log(["x=", x].join("")); // "x=test"

当 + 操作符一边为数字时，对象x趋向于转换为数字，表达式会优先调用valueOf方法，如果调用数字的join方法，对象x 趋向于转换为字符串，表达式会优先调用toString

trim

trim()方法清除字符串首尾的空白并返回

语法 ： str.trim()

' a b c '.trim()  //'a b c'

trim() 方法是 ECMAScript 5.1 标准加入的，它并不支持IE9以下的低版本IE浏览器，如需支持，请参考以下兼容写法：

if(!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g,'');
  };
}

includes(ES6)

includes()方法基于 ECMAScript 2015（ES6）规范， 它用来判断一个字符串是否属于另一个字符，如果时，则返回true,否则返回false

语法:str.includes(subString[,position])

var str = "Practice makes perfect.";
console.log(str.includes("perfect")); // true
console.log(str.includes("perfect",100)); // false

endsWith (ES6)

endsWith() 方法基于ECMAScript 2015（ES6）规范，它基本与 contains() 也就是 includes() 功能相同，不同的是，它用来判断一个字符串是否是原字符串的结尾。若是则返回true，否则返回false。

语法：str.endsWith(substring [, position])

与contains 方法不同，position 参数的默认值为字符串长度。

var str = "Learn and live.";
console.log(str.endsWith("live.")); // true
console.log(str.endsWith("Learn",5)); // true
console.log(str.endsWith("Learn",6)); // true

repeat(ES6)

repeat() 方法基于ECMAScript 2015（ES6）规范，它返回重复原字符串多次的新字符串。

语法：str.repeat(count)

count 参数只能取大于等于0 的数字。若该数字不为整数，将自动转换为整数形式，若为负数或者其他值将报错。

var str = "A still tongue makes a wise head.";
console.log(str.repeat(0)); // ""
console.log(str.repeat(1)); // A still tongue makes a wise head.
console.log(str.repeat(1.5)); // A still tongue makes a wise head.
console.log(str.repeat(-1)); // RangeError:Invalid count value

startsWith(ES6)

startsWith() 方法基于ECMAScript 2015（ES6）规范，它用来判断当前字符串是否是以给定字符串开始的，若是则返回true，否则返回false。

语法：str.startsWith(subString [, position])

var str = "Where there is a will, there is a way.";
console.log(str.startsWith("Where")); // true
console.log(str.startsWith("there",6)); // true

anchor

anchor() 方法创建一个锚标签。

语法：str.anchor(name)

name 指定被创建的a标签的name属性，使用该方法创建的锚点，将会成为 document.anchors 数组的元素。

var str = "this is a anchor tag";
document.body.innerHTML = document.body.innerHTML + str.anchor("anchor1"); // body末尾将会追加这些内容 <a name="anchor1">this is a anchor tag</a>
12

link

link() 方法同样创建一个a标签。

语法：str.link(url)

url 指定被创建的a标签的href属性，如果url中包含特殊字符，将自动进行编码。例如 " 会被转义为 &\quot。 使用该方法创建的a标签，将会成为 document.links 数组中的元素。

var str = "百度";
document.write(str.link("https://www.baidu.com")); // <a href="https:/

小结

部分字符串方法之间存在很大的相似性，要注意区分他们的功能和使用场景。如：

• substr 和 substring，都是两个参数，作用基本相同，两者第一个参数含义相同，但用法不同，前者可为负数，后者值为负数或者非整数时将隐式转换为0。前者第二个参数表示截取字符串的长度，后者第二个参数表示截取字符串的下标；同时substring第一个参数大于第二个参数时，执行结果同位置调换后的结果。
• search方法与indexOf方法作用基本一致，都是查询到了就返回子串第一次出现的下标，否则返回-1，唯一的区别就在于search默认会将子串转化为正则表达式形式，而indexOf不做此处理，也不能处理正则。

另外，还记得吗？concat方法由于效率问题，不推荐使用。

通常，字符串中，常用的方法就charAt、indexOf、lastIndexOf、match、replace、search、slice、split、substr、substring、toLowerCase、toUpperCase、trim、valueof 等这些。熟悉它们的语法规则就能熟练地驾驭字符串。