[ES6]---字符串的扩展（字符串的判断&&模板字符串）的讲解

字符串的扩展

字符串判断是否包含

ES5提供判断是否包含的方法：

String.indexOf(searchStr)方法

• 作用：回指定字符串中包含指定子字符串第一个匹配的索引值
• 结果：包含–返回第一个匹配的索引值，不包含–返回-1

let str = 'qishilong'
console.log(str.indexOf('i')); //1

String.lastIndexOf(searchStr)方法：返回指定字符串中包含指定字符串的最后一个匹配的索引值

let str = 'qishilong'console.log(str.lastIndexOf('i')) //4

ES6提供的判断是否包含的方法

includes()方法：用于判断一个字符串是否包含在另一个字符串中，返回布尔值。

str.includes(searchString[,position])

• searchString:在str字符串中搜索的字符串
• position：可选项。从当前字符串的哪个索引值为开始搜索子字符串，默认值为0
• 值得注意的是，includes()方法是区分大小写的

let str = 'qishilong'
console.log(str.includes('i')) //true
console.log(str.includes('i', 3)) //true
console.log(str.includes('i', 5)) //false
    // includes()方法是区分大小写的
console.log(str.includes("I")) //false

我们可以基于includes()方法来实现一个不区别大小写的判断

function myIncludes(str, searchStr, index) {
    str = str.toLowerCase();
    searchStr = searchStr.toLowerCase()
    if (typeof index === 'number') {
        return str.includes(searchStr, index)
    } else {
        return str.includes(searchStr)
    }
}
console.log(myIncludes(str, 'I')) //true

上述方法是最基础最简单的方法，我们还可以给String定义属性，全加到String这个方法中。

Object.defineProperty(String.prototype, {
    myIncludes: function(searchStr, index) {
        let str = this.toLowerCase();
        searchStr = searchStr.toLowerCase()
        if (typeof index === 'number') {
            return str.includes(searchStr, index)
        } else {
            return str.includes(searchStr)
        }
    }
})

startsWith()方法：

startsWidth()方法用于判断当前字符串是否是另一个给定的子字符串“开头”的，返回布尔值

str.startsWith(searchString[,position])

• searchString:在str字符串中搜索的字符串
• position：可选项。从当前字符串的哪个索引位置开始搜寻子字符串，默认值为0.
• 值得注意的是，startsWith是区分大小写的

☆startsWidth()方法不是表示指定字符串是以另一个字符串开始的，表示指定字符串的指定索引值开始是否以另一个字符串开始的

let str = 'qishilong'
console.log(str.startsWith('shi', 2))  //true
console.log(str.startsWith('long', 5))  //true

repeat()方法

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

str.repeat(number)

• number:表示将元字符串重复的次数

• number参数具有以下几种情况：

  • 如果number参数为小数的话，则会向下取整
  • 如果number参数为负数或者无穷大的话，会报错
  • 如果number参数为NaN的话，则为0，
  • 如果number参数为字符串，则会先转换为数字值

• number为小数，向下取整的

let str = 'abc';
console.log(str.repeat(2.5));//abcabc

• number为NaN，不报错

let str = 'abc';
console.log(str.repeat(NaN));// 没有任何输出

• number为负数，报错

let str = 'abc';
console.log(str.repeat(-2));// Invalid count value
console.log(str.repeat(Infinity));

• number为0，不报错

let str = 'abc';
console.log(str.repeat(0));// 没有任何输出

• number为字符串，先转换成数字值

let str = 'abc';
console.log(str.repeat('3'));//abcabcabc
console.log(str.repeat(true));

模板字符串

模板字符串是什么

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

多行模板字符串

• ES5
  • 字符串如果需要输出多行的话，需要使用字符串的拼接实现。
• ES6
  • 字符串如果需要输出多行的话，只需要使用模板字符串即可。

//1.替代原有的普通字符串
//定义一个普通字符串
let str1 = 'this is string'
    //定义一个模板字符串--充当普通字符串来使用
let str2 = `this is string`;
console.log(str1, str2) //this is string this is string

//2.多行字符串
//定义一个普通字符串
let str3 = 'this is\nstring';
console.log(str3) //this is
    //string

let str4 = 'this is' +
    'string';
console.log(str4) //this isstring
    //定义一个模板字符串--充当多行普通字符串来使用
let str5 = `this is
          string`
console.log(str5)

//3.字符串与变量配合使用
let name = '林俊杰';
//定义一个普通字符串
let str6 = 'hello' + name + '!'
console.log(str6) //hello林俊杰!
    //定义一个模板字符串
let str7 = `hello ${name} !`
console.log(str7) //hello 林俊杰 !

带表达式的模板字符串

在普通字符串中嵌入表达式，需要通字符串的过拼接操作来实现。

通过模板字符串，嵌入变量需要将变量名写在$之中。

带标签的模板字符串

模板字符串的功能可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。

let str = 'console';
// 普通字符串
console.log('this is ' +str+ '.');// this is console.
// 模版字符串
console.log(`this is ${str}.`);// this is console.
// 带标签的模板字符串 - 用于处理模版字符串的方法(输出到控制台)
console.log`this is ${str}.`;// [ 'this is ', '.' ] console

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

原始字符串

在标签函数的第一个参数中，存在一个特殊的属性raw，可以通过它来访问模板字符串的原始字符串，而不经过特殊字符的替换。

let str = 'function'

function fn(arg) {
    console.log(arg.raw[0]) //this is
    console.log(arg.raw) //[ 'this is ', '.' ]
}
fn `this is ${str}.`;
console.log(String.raw `this is ${str}.`) //this is function.

所谓的原始字符串是模版字符串被定义时的内容，而不是处理之后的内

被定义时的内容 – this is ${str}.

处理之后的内容 – this is function