ES6扩展 字符串扩展

ES6学习 本文总阅读量次

了解下ES6中的字符串扩展

补充：敲代码中需要注意的地方

  • 永远记住对象的属性键值对中间是冒号不是等号！！
  • 具体参考下方“模版字符串”的例子1

补充：在js文件里插入html代码的规则

  • 方法一：html代码放在一行内显示（去掉所有空格/tab/换行）

  • 方法二：想要保留格式可以在每行代码尾部加反斜线\
    例子

  • 普通字符串拼接中，与变量的拼接可使用+，行尾有+则不需要\即可折行（如下图例子）但是+前后需要使用引号将html标签单独括起来。（复杂，推荐使用模板字符串）
    “模版字符串”的例子2代码1中部分代码

  • **模板字符串中插入html代码时可以换行，行尾不需要插入转义符\**，但要注意模板字符串是使用反引号`代替引号的。
    使用模板字符串插入html

复习：数组的join()将数组转换为字符串

1
数组.join(分隔符)
  • 分隔符默认为,
  • 参数类型为string，需要修改分隔符时注意用引号

复习：访问对象属性的两种方法

  • 可以使用 对象名.property (例子1 )
  • 或 对象名["property"]( 例子2)

模版字符串（拼接）

模版字符串(注意:使用的是反引号！)：

1
`一些值${想要拼接的值，变量等}另一些值`

以前常用的字符串拼接：

1
"一些值"+变量+"另一些值"
  • 模版字符串中，${变量}是变量的占位符。
  • 模板字符串中插入html代码时可以换行，行尾不需要插入转义符\。
  • 普通的字符串拼接插入html代码时不能换行，换行时行尾需要插入转义符\。
  • 可用于凭借变量和值，比如在js中修改元素el的transform属性 的 属性值translate(a,b),其中x、y是变量:
    1
    el.style.transform = `translate(${x}px,${y}px)`

例子1

  • 从say1和say4可以看出，**使用反引号`来代替最外层引号,使用${}将需要引入的变量括起来代替前后的连接符+**。
  • 从say2可以看出${}内还可以包裹${}。也就是模板字符串内还可以拼接模板字符串。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <script>
        const xiaoming = {
                name: "xiaoming",
                age: 14, //永远记住属性键值对中间是冒号不是等号！！
                say1: function() {
                    console.log("我叫" + this.name.toUpperCase() + ",我今年" + this.age + "岁！");
                },
                say2: function() {
                console.log(`我叫${`Mr.${this.name.toUpperCase() }`},我今年${this.age }岁！`);
                },
                say3: function() {
                console.log(`我叫${this.name.toUpperCase() }${this.age }岁是我的年龄！`);
                },
                say4: function() {
                console.log(`我叫${this.name.toUpperCase() },我今年${this.age }岁！`);
                }
        }
        xiaoming.say1();//我叫XIAOMING,我今年14岁！
        xiaoming.say2();//我叫Mr.XIAOMING,我今年14岁！
        xiaoming.say3();//我叫XIAOMING14岁是我的年龄！
        xiaoming.say4();//我叫XIAOMING,我今年14岁！
    </script>

例子2

在该例子中使用数组的join()将数组转换为字符串时类似于:

1
[`<li>123</li>`,`<li>456</li>`].join("")

会得到<li>123</li><li>456</li>
此时只要把准换好的字符串放入ul标签即可得到无序列表
代码1
在代码1中，我们可以发现：
字符串中插入html代码很麻烦，行尾需要插入转义符\。

推荐将代码1插入html部分改为模板字符串：
模板字符串中插入html代码时可以换行，行尾不需要插入转义符\。
代码2
在代码2中，我们可以发现：

  • 模板字符串可以对模板字符串进行嵌套。
  • 模板字符串内可以插入简单表达式（比如调用函数）

字符串的部分新方法

padStart()与padEnd()补全字符串

  • 第一个参数：补全后的字符串总长度
  • 第二个参数：用来补全的字符串
  • 返回值：字符串
  • 语法：返回的字符串=调用该方法的字符串.padStart(补全后的字符串总长度,用来补全的字符串);
  • 当参数1>调用该方法的字符串长度+用来补全的字符串长度时，用来补全的字符串会被循环使用。（如下面例子str3）
  • padStart()从调用该方法的字符串前面开始插入参数2给出的字符串
  • padEnd()从调用该方法的字符串后面开始插入参数2给出的字符串
1
2
3
4
5
6
7
8
9
10
11
12
{
    let str="L"
    
    let str1=str.padStart(4,"OVE");
    console.log(str1);//OVEL
    
    let str2=str.padEnd(4,"OVE");
    console.log(str2);//LOVE
    
    let str3=str.padEnd(8,'OVE');
    console.log(str3);//LOVEOVEO
}

repeat()重复字符串

  • 语法：返回的字符串=调用该方法的字符串.repeat(重复的次数);
  • 注意：参数可以是大于-1的小数，如果是小数则取整（如：2.33取2，-0.88取0）
    1
    2
    3
    {
        console.log("hlb".repeat(5));//hlbhlbhlbhlbhlb
    }

也可以自己实现一个简易的repeat方法：

1
2
3
4
5
6
//可以自己实现一个repeat方法，将需要重复的字符串str和重复次数num传进去
function repeatMe(str,num){
    //（返回的数组+1）转换为字符串，间隔符为传入的字符串str
    return new Array(num+1).join(str);
}
console.log(repeatMe("hlb",3));//hlbhlbhlb

startsWith()与endsWith()判断字符串开头、结尾

  • 参考startsWith、endsWith
  • 语法：需要被判断的字符串.startsWith("想要验证的字符或者字符串")
  • 返回值：是则返回true，不是则返回false
  • 字符串中中文/英文/标点符号都支持
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    {
        const str="I am a extremely happy girl";

        console.log(str.startsWith("b"));//false
        console.log(str.startsWith("I am"));//true

        console.log(str.endsWith("py girl"));//true
        console.log(str.endsWith("b"));//false

        const str1="我超级棒的！";

        console.log(str1.startsWith("我"));//true
        console.log(str1.startsWith("I"));//false

        console.log(str1.endsWith("的！"));//true
        console.log(str1.endsWith("b"));//false
    }

include()查找是否含有某字符(串)

语法：需要被查询的字符串.includes("需要查询的字符或字符串");

1
2
3
4
5
6
const str = "I am a extremely happy girl";
if (str.includes("哈哈")) {//不存在
    console.log("存在");
}else{
    console.log("不存在");                
}

补充：没有include()前实现该功能的方法

  • 在没有include()之前字符串使用查询字符串下标indexOf()的方式来判断字符串是否拥有另一个字符或者字符串。
  • 原理：如果该字符串不包含参数中的字符或者字符串则返回值为-1，如果包含则返回值为数组下标。
    1
    2
    3
    4
    5
    6
    const str = "I am a extremely happy girl";
    if (str.indexOf("哈哈") != -1) {//不存在
        console.log("存在");
    }else{
        console.log("不存在");                
    }

补充：使用“按位取反~”简化上面例子

  • 按位取反~可以简单的理解为~x=-(x+1)
  • 使用按位取反替换上面的例子：
    1
    2
    3
    4
    5
    6
    const str = "I am a extremely happy girl";
    if(~str.indexOf("哈哈")){//不存在
        console.log("存在");
    }else{
        console.log("不存在");                
    }
    原理：当str.indexOf("哈哈")值为-1时就是没取到，此时使用按位取反结果为0，在if中0为false。

for-of()遍历（迭代）对象

  • for-of()语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环（遍历），调用自定义迭代钩子，并为每个不同属性的值执行语句。
  • 语法：
    1
    2
    3
    for (variable of iterable) {
        //statements
    }
  • 参数：
    variable：在每次迭代中，将不同属性的值分配给变量。
    iterable：被迭代枚举其属性的对象。
  • 补充：拥有迭代（遍历）器接口iterator的对象都可以使用for-of语句,比如：
    1
    2
    3
    4
    5
    const arr = [1, 2, 3, 4.4, "lalal", false];
    console.log(arr.keys());//Array Iterator {},说明arr.keys()含有迭代器接口Iterator ，故可以使用`for-of`
    for (let i of arr.keys()) {
        console.log(i);
    }
    运行结果
  • 例子：
  • 迭代数组：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    let iterable = [10, 20, 30];

    for (let value of iterable) {
        value += 1;
        console.log(value);
    }
    // 11
    // 21
    // 31
  • 迭代字符串：
    1
    2
    3
    4
    5
    6
    7
    8
    let iterable = "boo";

    for (let value of iterable) {
      console.log(value);
    }
    // "b"
    // "o"
    // "o"
  • 迭代去重函数Set()：
    1
    2
    3
    4
    5
    6
    7
    8
    let iterable = new Set([1, 1, 2, 2, 3, 3]);

    for (let value of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3
  • 迭代arguments对象：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    (function() {
      for (let argument of arguments) {
        console.log(argument);
      }
    })(1, 2, 3);

    // 1
    // 2
    // 3
  • 迭代 DOM 元素集合，比如一个NodeList对象：
    MDN中关于NodeList的描述
    下面的例子演示给每一个 article 标签内的 p 标签添加一个 “read” 类：
    1
    2
    3
    4
    5
    6
    //注意：这只能在实现了NodeList.prototype[Symbol.iterator]的平台上运行
    let articleParagraphs = document.querySelectorAll("article > p");

    for (let paragraph of articleParagraphs) {
      paragraph.classList.add("read");
    }
  • MDN中更多关于for-of的知识

for-of()遍历字符串

  • 语法：for(let word of str){执行操作语句}
  • 参数含义：
    word：当前循环到的元素
    str：需要遍历的字符串名
  • 注意：word的数据类型是string，所以在下面的加密小例子中用它来当属性名调用对象属性时不需要再加引号！
  • for-of()还可以遍历对象属性，具体例子在笔记“ES6扩展 对象扩展”中。
    1
    2
    3
    4
    5
    let str="我超级棒的！";
    for (let word of str){
        console.log(word);
        console.log(typeof(word));//string
    }

使用for-of()完成加密小例子

使用for-of()完成加密小例子

注意：

  • 可以使用 对象名["property"]来访问对象属性。
  • 但是在该例子中可以发现并没有引号，这是因为：word的数据类型是string，所以在下面的例子中用它来当属性名调用对象属性时不需要再加引号！

ES6之前遍历字符串的方式以及遍历字符串并进行加密的例子

在下一篇笔记。

新的Unicode表示法和遍历方式

  • 概念：Unicode是一项标准包括字符集、编码方案等。
  • 他是为了解决传统的字符编码方案的局限而产生的，为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。
  • js中遇到\u机器就知道后面跟的是码点，以前的Unicode只能识别0000-ffff之间的码点，现在可以使用{}将码点包起来识别超过0000-ffff这个范围的二进制编码。
    例如"\u{1f436}"识别出小狗🐶（注意引号）

使用codePointAt()获取字符串中对应字符的一个码点

  • 语法："对应字符".codePointAt(0).toString(16);
  • 例子：
    1
    2
    3
    4
    "🐶".codePointAt(0);//得到128054
    //128054是码点，但它是10进制的，要转换为16进制才是我们要的
    "🐶".codePointAt(0).toString(16);//得到"1f436"

补充：at()根据下标取字符
虽然chrome不支持at()，但是后期可以使用软件将ES6代码转换成ES5，这里了解一下。

1
"🐶".at(0);
ES6学习