字符串的扩展

模板字符串

传统的 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 = 30var 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 的字符串相关拓展，它还有很多其他的新增方法，这里只列举出我个人使用较多的少量方法

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

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

ES6:字符串的扩展及新增方法相关推荐

c++ to_string 指定字符位数_你不知道的ES6字符串的扩展
茫茫人海中与你相遇相信未来的你不会很差作者:知否来源:https://segmentfault.com/a/1190000038557524 我们来学习 ES6中字符串类型的扩展,包括一些字符串 ...
ES6字符串的扩展方法~超详细哦
下面的对ES 6的处理字符串常用方法的整理,希望可以帮助到有需要的小伙伴,跟小编一起来看看吧~ 文章目录 includes()方法 startsWith()方法 endsWidth()方法 inclu ...
ES6学习笔记（对象新增方法）
1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0. ...
es6 字符串的扩展
includes 是否包含某字符串 startsWith 以某字符串开头 endsWith 以某字符串结尾 repeat 重复 n 次 /*stringincludes 是否包含某字符串startsW ...
ECMA2015(ES6)简单入门-9-对象-对象的扩展-对象的新增方法
对象的创建使用Object构造函数来创建一个对象使用对象字面量创建一个对象工厂模式创建对象构造函数模式创建对象原型模式创建对象本身也有缺陷,就是实例共享了引用类型friends,从下面的代 ...
ES6学习（四）—字符串的新增方法
ES6学习(四)-字符串的新增方法挑重点文章只列举了一部分完整版请看阮一峰ES6入门教程点我查看阮一峰ES6入门教程实例方法:includes(), startsWith(), endsWi ...
ES6 --》字符串与数值新增方法
目录字符串新增方法模板字符串字符串对象新增方法数值新增方法 Math数值新增方法主要讲解了ES6中字符串与数值新增的常见的主要方法, 对其做了如下总结: 字符串新增方法 ES6对字符串新增的 ...
你知道ES5 和 ES6 的区别吗?，能说出说几个 ES6 的新增方法吗?
目录 ES5 和 ES6 的区别 ES6 的新增方法 1.新增声明命令 let 和 const 1.1)特点 2.模板字符串(Template String) 3.函数的扩展 3.1)函数的默认参数 ...
es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...

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