前端研习录（36）——ES6 字符串扩展及新增方法讲解及示例分析

清风不渡

已于 2022-08-19 22:10:46 修改

阅读量276

点赞数 1

分类专栏：前端研习录文章标签：前端 es6 javascript

于 2022-08-19 21:55:32 首次发布

本文链接：https://blog.csdn.net/WXKKang/article/details/126431876

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（36）——ES6 字符串扩展及新增方法讲解及示例分析

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入ES6 字符串扩展及新增方法部分

一、字符串扩展

1、字符串Unicode表示法

ES6加强了对Unicode的支持，允许采用\uxxx的形式表示一个字符，其中xxx表示字符的Unicode码点

Unicode
统一码（Unicode），也称作万国码、单一码，是计算机科学领域里的一项业界标准，包括字符集、编码方案等。Unicode是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求，比如：

“\u0061” 代表字符 “a”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>

    <script>

        console.log("\u0061");

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

结果如下：

在这里插入图片描述

2、字符串遍历接口

可通过for…of来循环遍历字符串，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>

    <script>

        for(let i of "abcdefg"){
            console.log(i);
        }

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

结果如下：

在这里插入图片描述

3、模板字符串

模板字符串(template string)是增强版的字符串，用反引号(`) 标识。它可以当作普通字符串使用，也可
以用来定义多行字符串，或者在字符串中嵌入变量，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <a href=""></a>

    <script>

        var baiduHref = "https://www.baidu.com/"
        var text = "前往百度"
        var str = " <a href='"+baiduHref+"'>"+text+"</a>"
        var str1 = `<a href="${baiduHref}">${text}</a>`
        document.write(str)
        document.write(str1)

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

结果如下：

在这里插入图片描述

二、字符串新增方法

1、includes()方法

includes()方法返回布尔值，表示是否找到了参数字符串

2、startsWith()方法

includes()方法返回布尔值，表示参数字符串是否在原字符串开头

3、endsWith()方法

includes()方法返回布尔值，表示参数字符串是否在原字符串尾部

注意：
这三个方法都支持第二个参数，表示开始搜索的位置

4、repeat()方法

repeat()方法返回一个新字符串，表示将原字符串重复n次

5、padStart() | padEnd()方法

padStart() | padEnd()方法用于当字符串不够长度的时候在头部或尾部进行补全

6、trimStart() | trimEnd()方法

trimStart() | trimEnd()方法用于去除字符串头部 | 尾部的空格，返回一个新字符串，不会修改原字符串

7、at() 方法

at() 方法接收一个整数参数，返回参数指定位置的字符，如为负数则从末尾开始
如果参数超出字符串，则返回undefined

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>

    <script>

        var str = "hello world"
        console.log(str.includes("str"));
        console.log(str.startsWith("hello"));
        console.log(str.endsWith("ld"));

        
        console.log(str.repeat(3));

        console.log(str.padStart(15,"a"));
        console.log(str.padEnd(15,"a"));

        var str1 = "   str   ";
        console.log(str1.trim());
        console.log(str1.trimStart());
        console.log(str1.trimEnd());

        console.log(str.at(1));
        console.log(str.at(-1));
        console.log(str.at(50));
    </script>
</body>
</html>