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

    前端研习录（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

      结果如下：

    在这里插入图片描述

  • 相关阅读:
    esp-adf音频框架
    博弈论——反应函数
    unity 安卓端使用JSON（LitJson）
    【C++上层应用】7. Web编程*
    怎么给视频加配音？试试这些制作方法吧
    你有没有注意到Java越来越卷了？
    【1419. 数青蛙】
    Java(七)——集合框架---Set集合
    金仓数据库KingbaseES immutable 与 stable 函数的差异
    大数据技术生态，不懂你捶我
  • 原文地址：https://blog.csdn.net/WXKKang/article/details/126431876