前端研习录（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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

结果如下：

在这里插入图片描述

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

结果如下：

在这里插入图片描述

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 = " "+text+""
        var str1 = `${baiduHref}">${text}`
        document.write(str)
        document.write(str1)

    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

结果如下：

在这里插入图片描述

二、字符串新增方法

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

结果如下：

在这里插入图片描述

相关阅读:
Springboot+vue的医药管理系统（有报告）。Javaee项目，springboot vue前后端分离项目。
10.数学环境排列数学公式
Spring Boot 国际化 i18n
ThinkPHP 系列漏洞
关于java.lang.NoSuchMethodException异常解决问题
2020年海南职业院校技能大赛高职组
【运维】hadoop3.0.3集群安装（二）横向新增节点和删除节点
sonic-ios-bridge（sib）性能监控
18_ue4进阶末日生存游戏开发[创建运行时UI]
Python 全栈系列211 自建容器仓库

原文地址：https://blog.csdn.net/WXKKang/article/details/126431876