ES6:字符串的扩展及新增方法

字符串的扩展

模板字符串

 传统的 JavaScript 语言，都是使用 ‘’  或者  “”  来把字符串套起来，然后使用 + 拼接一些定义的变量， ES6 改进了这种方法，使用一个  ~  [反引号] （就是 Tab 键上面那个 ~ ，我也叫 它 飘键），使用 $(美元符号)  包裹变量就可以让写法更加简单 ，下面举个简单的例子

//es5    
let name = 'itcast'    
console.log('hello ' + name)  //hello itcast
//es6    
const name = 'itcast'    
console.log(`hello ${name}`) //hello itcast

---

可以看到 两种写法结果都是一样的，这样看来好像 使用 ~ 也没有简便太多，可能是代码量太少了，如果变量拼接字符串 有许多的话，就会频繁的 使用  “ ” 和 +  来拼接字符串和变量，这样的代码就比较臃肿， 这个时候就可以体现模板字符串的好处

 <script>
        var username = "张三"
        var age = 30
        var date = "星期一"
        // 1: 原始的做法就是去拼接字符串
        var str1 = " hello ,"+ "我名字叫 " + username + ",年龄是: " + age + "岁" 
        console.log(str1);  
        // 2:用模板字符串来拯救 注意：这里是 `（飘键） (tab键盘的上面那个键)
        var str2 = `hello,我名字叫 ${username},年龄是: ${age}岁`;
        console.log(str2);
    </script>

上面举的简单例子其实代码量也不是很多，倒也使用了许多的 " " 和 + ，这样看起来代码也有些许臃肿，这个时候使用 ES6 的模板字符串就比较方便，代码的可读性会得到提高

模板字符串运算

大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

 调用函数

模板字符串之中还能调用函数。

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

---

如果需要引用模板字符串本身，在需要时执行，可以写成函数。

let func = (name) => `Hello ${name}!`;
func('Jack') // "Hello Jack!"

上面代码中，模板字符串写成了一个函数的返回值。执行这个函数，就相当于执行这个模板字符串了。

新增方法

repeat()

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

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

---

参数如果是小数，会被向下取整。

'na'.repeat(2.9) // "nana"

如果repeat的参数是负数或者Infinity，会报错。

注意：

如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算，取整以后等于-0，repeat视同为 0。

'na'.repeat(-0.9) // ""

 参数NaN等同于 0。

'na'.repeat(NaN) // ""

 如果repeat的参数是字符串，则会先转换成数字。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

includes(), startsWith(), endsWith() 

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了以下三种新方法，它们分别有不同的适用场景，个人感觉 使用 较多的是 includes（）方法 ，我的这篇文章 使用 includes（）实现简单搜索

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

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

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

 上面代码均使用第二个参数表示，可以看到使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

---

 注意：关于 ES6 的字符串相关拓展，它还有很多其他的新增方法，这里只列举出我个人使用较多的少量方法

---

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会一一回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长