字符串的方法

查找或检索或匹配

1，indexOf()

返回字符串中指定文本首次出现的索引（位置）
【接受第二个参数，表示开始检索的位置，例如：aaa.indexOf(“a”,2)表示检索字符串aaa中字符串a从2号位置直到末尾是否出现，出现返回索引，否则返回-1】

2，lastIndexOf()

返回指定文本在字符串中最后一次出现的索引
【接受第二个参数，表示开始检索的位置，例如：aaa.lastIndexOf(“a”,2)表示检索字符串aaa中字符串a从2号位置直到开头是否出现，出现返回索引，否则返回-1】

3，search()

搜索特定值的字符串，并返回匹配的位置，出现返回索引，否则返回-1

4，ES6新的方法1：includes()

判断一个字符串是否包含在另一个字符串中，返回true或false，默认从0开始查找，如果传入的索引值大于等于数组长度则不会遍历数组，直接返回false

5，ES6新的方法2：startsWith()

用于判断一个字符串是否在另一个字符串的头部，返回true或false

6，ES6新的方法3：endsWith()

用于判断一个字符串是否在另一个字符串的尾部，返回true或false

indexOf()无法使用正则表达式，返回索引
search()不能设置第二参数，返回索引
includes()无法使用正则表达式，返回布尔值
indexOf不能判断数组中是否含有NaN，而includes可以

7，test()

用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。（仅能用正则匹配，不能用字符串）

8，exec()

用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。（仅能用正则匹配，不能用字符串）
【返回的数组中，首先会返回所有匹配到的字符串，另外index字段表示匹配到的字符串的第一个字符的索引，input字段表示用于匹配的字符串，length字段表示返回的匹配成功的字符串的数组的长度，groups字段表示命名的捕获组(?apple)】

9，match()

返回存放匹配结果的数组,同exec()

10，matchAll()

如果一个正则表达式在字符串里面有多个匹配，现在一般使用g修饰符或y修饰符，在循环里面逐一取出。增加了String.prototype.matchAll()方法，可以一次性取出所有匹配。不过，它返回的是一个遍历器（Iterator），而不是数组。
由于string.matchAll(regex)返回的是遍历器，所以可以用for…of循环取出。相对于返回数组，返回遍历器的好处在于，如果匹配结果是一个很大的数组，那么遍历器比较节省资源。

遍历器转为数组是非常简单的，使用…运算符和Array.from()方法就可以了

exec()使用格式 /(a)(pp)/.exec(name) 只接受正则表达式
match()使用格式 name.match(/a(?pp)/)或name.match(“app”) 接受正则表达式和字符串

提取或切割或截取

1，slice()

提取字符串的某个部分并在新字符串中返回被提取的部分【参数可使用负数，不包括end位，不填写第二参数，则截取从开始位至末尾】

2，substring()

功能同slice，但是不接受负数参数

3，substr()

功能同slice，但第二参数表示截取长度，接受负数

替换或转换或删除或去掉

1，replace()

用另一个值替换在字符串中指定的值，不会改变调用它的字符串。它返回的是新字符串

默认地，replace() 只替换首个匹配，如需执行所有相关字符的替换，请使用正则表达式 /g
默认地，replace() 对大小写敏感，如需执行大小写不敏感的替换，请使用正则表达式 /i

2，ES6新的方法：replaceAll()

可以一次性替换所有匹配，返回一个新字符串，不会改变原字符串

String.prototype.replaceAll(searchValue, replacement)

1. 第一个参数searchValue是搜索模式，可以是一个字符串，也可以是一个全局的正则表达式（必须带有g修饰符，如果没有会报错）
2. 第二个参数replacement是一个字符串，表示替换的文本，其中可以使用一些特殊字符串

• $&：匹配的子字符串。
• $` ：匹配结果前面的文本。
• $’：匹配结果后面的文本。
• $n：匹配成功的第n组内容，n是从1开始的自然数。这个参数生效的前提是，第一个参数必须是正则表达式。
• $$：指代美元符号$

// $& 表示匹配的字符串，即`b`本身
// 所以返回结果与原字符串一致
'abbc'.replaceAll('b', '$&')
// 'abbc'
// $` 表示匹配结果之前的字符串
// 对于第一个`b`，$` 指代`a`
// 对于第二个`b`，$` 指代`ab`
'abbc'.replaceAll('b', '$`')
// 'aaabc'
// $' 表示匹配结果之后的字符串
// 对于第一个`b`，$' 指代`bc`
// 对于第二个`b`，$' 指代`c`
'abbc'.replaceAll('b', `$'`)
// 'abccc'
// $1 表示正则表达式的第一个组匹配，指代`ab`
// $2 表示正则表达式的第二个组匹配，指代`bc`
'abbc'.replaceAll(/(ab)(bc)/g, '$2$1')
// 'bcab'
// $$ 指代 $
'abc'.replaceAll('b', '$$')
// 'a$c'

3. 第二个参数replacement也可以是一个函数，该函数的返回值将替换掉第一个参数searchValue匹配的文本

这个替换函数可以接受多个参数。第一个参数是捕捉到的匹配内容，第二个参数捕捉到是组匹配（有多少个组匹配，就有多少个对应的参数）。此外，最后还可以添加两个参数，倒数第二个参数是捕捉到的内容在整个字符串中的位置，最后一个参数是原字符串。

const str = '123abc456';
const regex = /(d+)([a-z]+)(d+)/g;
function replacer(match, p1, p2, p3, offset, string) {
return [p1, p2, p3].join(' - ');
}
str.replaceAll(regex, replacer)
// 123 - abc - 456

3，toUpperCase()

把字符串转换为大写

4，toLowerCase()

把字符串转换为小写

5，split()

将字符串转换为数组，如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串，如果分隔符是 “”，被返回的数组将是间隔单个字符的数组

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

6，trim()

删除字符串两端的空白符

trim() == replace(/¹+|[suFEFFxA0]+KaTeX parse error: Undefined control sequence: s at position 23: … == replace(/(^̲s̲+)|(s+)/g,"")

7，ES6新的方法：trimStart()

只消除头部的空格，保留尾部的空格

8，ES6新的方法：trimEnd()

只消除尾部的空格，保留头部的空格

除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效
浏览器还部署了额外的两个方法，trimLeft()是trimStart()的别名，trimRight()是trimEnd()的别名。

js中去掉所有空格的方法：

• str.replaceAll(/s/g, “”)
• str.replaceAll(" ", “”)
• str.replace(/s/g, “”)

其余常见方法

1，concat()

连接两个或多个字符串

concat() 方法可用于代替加运算符“+”。下面两行是等效的

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

concat()和+的区别：
1.concat()是方法，+是表达式。
2.concat()只能是字符串和数组可以使用，+任何数据格式皆可。
3.不同的方式连接出来的值的数据格式不同：

• ++"+"凡是与string相加必得string，其余特殊情况如下++
• number + number => number
• array + array => string------“1,2,34,5,6”
• array + number => string------“1,2,32”
• array + object => string------“1,2,3[object Object]”
• object + object => string------"[object Object][object Object]"
• ++"concat()"只有字符串和数组可使用，与字符串相连即得字符串，与数组相连时连接参数是数组则相连两个数组，其余皆变成原数组的一个元素++
• string.concat(array)=>string------“aaa1,2,3”
• string.concat(object)=>string------“aaa[object Object]”
• string.concat(number)=>string------“aaa1”
• string.concat(boolean)=>string------“aaatrue”
• array.concat(array)=>array------[1, 2, 3, 4, 5, 6]
• array.concat(object)=>array------[0: 1,1: 2,2: 3,3: {1: “a”, 2: “b”},length: 4]
• array.concat(number)=>array------[1, 2, 3, 1]
• array.concat(boolean)=>array------ [1, 2, 3, true]

concat()和push()的区别：

• 使用concat()的对象不一定是数组，也可以字符串，而使用push()的对象只能是数组
• 返回值不同，concat()返回一个数组，push()返回调用该方法的数组的长度
• 调用concat()的对象的值不会发生改变，而调用push()的数组会增加一个元素
• 如果参数是数组，则调用push()的数组只增加一个元素，而使用concat()时，增加的元素的个数取决与参数这个数组的元素个数的多少

2，charAt()

返回字符串中指定下标（位置）的字符串

var str = "HELLO WORLD";
str.charAt(0);
// 返回 H
str.charAt(11);
// 返回 空字符串

3，charCodeAt()

返回字符串中指定索引的字符 unicode 编码

var str = "HELLO WORLD";
str.charCodeAt(0);
// 返回 72
str.charCodeAt(11);
// 返回 NaN

4，splice()

向/从数组中添加/删除项目，然后返回被删除的项目，该方法会改变原始数组。

注：str.splice(2,3)从2开始删，一共删3个，不是从2后面一位开始

ES6新方法

1，fromCodePoint()

用于从 Unicode 码点返回对应字符

ES5提供fromCharCode()和这个方法有一样的作用，但是这个方法不能识别码点大于0xFFFF的字符，当出现溢出时就会舍弃超过的高位码点

ES6以后可以使用如下："u{20BB7}"即{}中放如unicode的码点即可

有了这种表示法之后，JavaScript 共有6种方法可以表示一个字符

'z' === 'z'
// true
'172' === 'z' // true
'x7A' === 'z' // true
'u007A' === 'z' // true
'u{7A}' === 'z' // true

2，raw()

ES6 还为原生的 String 对象，提供了一个raw()方法。该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。
（也就是说，返回原始的字符串，即不对应该转义的字符进行转义）

String.raw`Hin${2+3}!`
//"Hin5!"
String.raw`"hin123"`
//""hin123""

注意：raw方法的调用和之前有所不同，它没有使用( )，而是使用``

String.raw()本质上是一个正常的函数，只是专用于模板字符串的标签函数。如果写成正常函数的形式，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组，对应模板字符串解析后的值。

// `foo${1 + 2}bar`
// 等同于
String.raw({ raw: ['foo', 'bar'] }, 1 + 2) // "foo3bar"

3，codePointAt()

用于返回一个字符的正确码点

js既不能识别大于0xFFFF的字符，也不能正确返回大于该码点的字符，于是乎再ES6中加入了codePointAt()方法用于放回正确的码点

对于那些两个字节储存的常规字符，它的返回结果与charCodeAt()方法相同。

codePointAt()方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString()方法转换一下

codePointAt()方法的参数，仍然是不正确的。比如，上面代码中，字符a在字符串s的正确位置序号应该是 1，但是必须向codePointAt()方法传入 2。解决这个问题的办法是使用for…of循环或者使用扩展运算符（…），因为它会正确识别 32 位的 UTF-16 字符。

let s = '????a';
for (let ch of s) {
console.log(ch.codePointAt(0).toString(16));
}
// 20bb7
// 61

codePointAt()方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

function is32Bit(c) {
return c.codePointAt(0) > 0xFFFF;
}
is32Bit("????") // true
is32Bit("a") // false

4，repeat()

返回一个新字符串，表示将原字符串重复n次

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

如果repeat的参数是负数或者Infinity，会报错

但是，如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。

'na'.repeat(-0.9) // ""

参数NaN等同于 0。

'na'.repeat(NaN) // ""

如果repeat的参数是字符串，则会先转换成数字。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

5，padStart()，padEnd()

字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

padStart()和padEnd()一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串

如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串

如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

如果省略第二个参数，默认使用空格补全长度。

padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

最后

以上就是无心火车最近收集整理的关于常用的字符串方法字符串的方法的全部内容，更多相关常用内容请搜索靠谱客的其他文章。