ECMAScript6-字符串的新增方法_ecma6 prototype 添加新方法-CSDN博客

本文链接：https://blog.csdn.net/weixin_45969711/article/details/121244662

字符串的新增方法

上期我们讲解了字符串的扩展，这期我们继续讲解字符串的相关知识，主要是字符串的新增方法。

实例⽅法：includes(), startsWith(), endsWith()-- ⼦串查找⽅法，返回布尔值。
实例⽅法：repeat()-- ⽅法返回⼀个新字符串，表示将原字符串重复n次。
实例⽅法：padStart()，padEnd() --字符串补全⻓度的功能。
实例⽅法：trimStart()，trimEnd()–消除字符串头部或尾部的空格，返回新串，不修改原字符串。
实例⽅法：matchAll()-- 返回⼀个正则表达式在当前字符串的所有匹配。

1、includes(), startsWith(), endsWith()

JavaScript 只有indexOf⽅法，可以⽤来确定⼀个字符串是否包含在另⼀个字符串中。
ES6 ⼜提供了三种新⽅法。
1.includes()：返回布尔值，表示是否找到了参数字符串。
2.startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
3.endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //定义⼀个url地址
    let url = 'http://www.baidu.com/a/b.html';
    //判断url字符串是否是以http开头
    console.log(url.startsWith('http')); //true
    //判断url字符串是否是以html结束
    console.log(url.endsWith('html')); //true
    //判断url字符串中是否包含baidu⼦串
    console.log(url.includes('baidu')); //true
</script>
</body>
</html>

2、实例⽅法：repeat()

repeat⽅法返回⼀个新字符串，表示将原字符串重复n次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //将原字符串重复指定次数
    console.log('x'.repeat(3)); // 'xxx' 3次重复x
    console.log('hello'.repeat(2)); // 'hellohello' 2次重复hello
    console.log('na'.repeat(0)); // '' 0次重复，故没有输出内容
    console.log('na'.repeat(2.9)); // 'nana' 参数会⾃动舍去取整为2
    console.log('na'.repeat(-1)); // 范围错误 RangeError: Invalid count value
</script>
</body>
</html>

3、实例⽅法：padStart() / padEnd()

ES2017 引⼊了字符串补全⻓度的功能。
如果某个字符串不够指定⻓度，会在头部或尾部补全。
padStart()⽤于头部补全
padEnd()⽤于尾部补全
这两个⽅法都有两个参数：
1.第⼀个参数⽤来指定字符串的最⼩⻓度，
2.第⼆个参数是⽤来补全的字符串，省略默认补空格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    console.log("123".padStart(5,"0")); //00123
    console.log("123".padEnd(5,"0")); //12300
    console.log("123".padEnd(2,"0")); //123
    //补⻬等宽编号
    console.log("3".padStart(8,"20190000")); //20190003
    console.log("23".padStart(8,"20190000")); //20190023
    console.log("123".padStart(8,"20190000")); //20190123
    //另⼀个⽤途是提示字符串格式（如下提示⽇期格式）。
    console.log('12'.padStart(10, 'YYYY-MM-DD')); // "YYYY-MM-12"
    console.log('09-12'.padStart(10, 'YYYY-MM-DD')); // "YYYY-09-12"

</script>
</body>
</html>

4、实例⽅法：trimStart()，trimEnd()

ES2019 对字符串实例新增了trimStart()和trimEnd()这两个⽅法。
它们的⾏为与trim()⼀致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。
它们返回的都是新字符串，不会修改原始字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    const s = " abc ";
    s.trim() // "abc"
    s.trimStart() // "abc "
    s.trimEnd() // " abc"
</script>
</body>
</html>

浏览器还部署了额外的两个⽅法，trimLeft()是trimStart()的别名，trimRight()是trimEnd()的别名。

5、实例⽅法：matchAll()

matchAll()⽅法返回⼀个正则表达式在当前字符串的所有匹配。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let info = "<ul><li>北京</li><li>上海</li><li>⼴州</li></ul>";
    //传统匹配⽅式
    console.log(info.match(/<li>(.*?)<\/li>/g));
    //结果：["<li>北京</li>", "<li>上海</li>", "<li>⼴州</li>"]
    //ES2020 增加了String.prototype.matchAll()⽅法，
    //可以⼀次性取出所有匹配。不过，它返回的是⼀个遍历器（Iterator），⽽不是数组。
    console.log([...info.matchAll(/<li>(.*?)<\/li>/g)]);
    //结果：[Array(2), Array(2), Array(2)]
    //其中["<li>北京</li>","北京",index:4,input:"<ul>...</ul>",groups: undefined]
</script>
</body>
</html>