字符串新增的方法

最新推荐文章于 2022-07-18 15:47:23 发布

原创最新推荐文章于 2022-07-18 15:47:23 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#visual studio code

这篇博客介绍了JavaScript ES6及后续版本中字符串新增的几个实例方法，包括：includes()、startsWith()、endsWith()用于判断字符串包含关系；repeat()用于字符串重复；padStart()和padEnd()实现字符串补全；以及ES2019引入的trimStart()和trimEnd()用于去除字符串首尾空格。这些方法丰富了JavaScript对字符串的操作能力。

1.实例方法：includes(), startsWith(), endsWith()
传统上，JavaScript 只有 indexOf 方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
在这里插入图片描述

这三个方法都支持第二个参数，表示开始搜索的位置。
在这里插入图片描述

上面代码表示，使用第二个参数 n 时， endsWith 的行为与其他两个方法有所不同。它针对前 n 个字符，而其他两个方法针对从第 n 个位置直到字符串结束。
2.实例方法：repeat()
repeat 方法返回一个新字符串，表示将原字符串重复 n 次
在这里插入图片描述

参数如果是小数，会被取整。
在这里插入图片描述

如果 repeat 的参数是负数或者 Infinity ，会报错。
在这里插入图片描述

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

参数 NaN 等同于 0。
在这里插入图片描述

如果 repeat 的参数是字符串，则会先转换成数字。
在这里插入图片描述

3.实例方法：padStart()，padEnd()
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。
padStart() 用于头部补全， padEnd() 用于尾部补全。
在这里插入图片描述

上面代码中， padStart() 和 padEnd() 一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。
如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。
在这里插入图片描述

如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。
在这里插入图片描述

如果省略第二个参数，默认使用空格补全长度。
在这里插入图片描述

padStart() 的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。
在这里插入图片描述

另一个用途是提示字符串格式。
在这里插入图片描述

4.实例方法：trimStart()，trimEnd()

ES2019对字符串实例新增了 trimStart() 和 trimEnd() 这两个方法。它们的行为与 trim() 一致，trimStart() 消除字符串头部的空格， trimEnd() 消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。
在这里插入图片描述

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