Part1 字符串的扩展
1.1 模版字符串
模板字符串使用反引号 `` 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法`${expression}`的占位符。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
模版字符串的用法如下：
``反引号来包含内容
${expression}来识别储存的内容片段，可以插入任意表达式
// 模板字符串中嵌入变量
{
let name = `hello `;
console.log(`${name}world`); // hello world
// 等同于
console.log(name + 'world'); // hello world
}
// 大括号内部可以放入任意的表达式
{
let num = 8;
console.log(`${num}`); // 8
console.log(`${parseInt(num/3)}`); // 2
console.log(`${num * 2}`); // 16
console.log(`${'qingsongchou'.toUpperCase()}`); // QINGSONGCHOU
let obj = {x: 1, y: 2};
`${obj.x + obj.y}`; // "3"
}
// 带标签的模板字符串
{
let listHTML = `
<ul>
<li>first</li>
<li>second</li>
</ul>
`
console.log(listHTML);
// <ul>
// <li>first</li>
// <li>second</li>
// </ul>
}
// 注意: 在新行中插入的任何字符都是模板字符串中的一部分，模板字符串中所有的空格、新行、缩进，都会原样输出在生成的字符串中
// 模板字符串的转义
console.log(`\``); // `
// 模版字符串的神奇用法
function show () {
console.log(1);
}
show`` // 1
// 循环嵌套
let names = ['gao', 'xiao', 'hei']
let str = `
<ul>
${
names.map(name => `<li>${name}</li>`).join('')
}
</ul>
`
模版字符串的优点:
- 支持变量
- 支持多行输入
- 模板字符串中嵌入任意的表达式
- 支持带标签的模版字符串
- 模板字符串有内建循环语法，支持条件语句
- 可以嵌套变量、函数、和可以循环嵌套
模版字符串的缺点：
- 不能自动转义特殊的字符串。 需要手动转义或者写一个转义函数
总体来说，模板字符串的出现了，让我们的字符串拼接更加的简洁实用了。
1.2 includes(), startsWith(), endsWith()
es6对字符串扩展了三个新的搜索的方法includes(), startsWith(), endsWith()。
| 方法 | 参数 | 作用 | 返回 |
|---|---|---|---|
| includes() | (str, n) | 用于判断参数字符串是否找到了参数字符串 | 布尔值 |
| startsWith() | (str, n) | 用于判断参数字符串是否在原字符串的头部 | 布尔值 |
| startsWith() | (str, n) | 用于判断参数字符串是否在原字符串的尾部 | 布尔值 |
这三个方法都支持第二个参数，表示开始搜索的位置。
let s = 'Hello world!';
s.includes('o') // true
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('Hello', 6) // false 表示从第6个位置直到字符串结束
s.startsWith('world', 6) // true 表示从第6个位置直到字符串结束
s.endsWith('Hello', 5) // true 表示从第5个位置直到字符串开头
- includes()的场景：用于判断当前浏览器是否是chrome浏览器？
我们可以通过window.navigator.userAgent获取到浏览器的类型、版本、操作系统类型、浏览器引擎类型等信息。
let ua = window.navigator.userAgent;
// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36"
ua.includes('Chrome');
// true
If(ua.includes('Chrome')) { todoSomething} else { todoSomething}
includes()目前存在兼容性问题， 不支持ios8及其ios8以下的系统，对于主站来说我们要更多的考虑用户的可访问性，用户体验等方面的原因，目前还是要慎重使用；像文熙做的vue大后台就不存在这样的考虑，就可以无顾虑使用啦。
- startsWith()的场景应用: 编辑页，修改图片
一个可以修改图片的场景，在编辑页面，已经有了几张第一次添加上传的图片，现在在编辑页再上传几张图片，需要获取到新添加的图片数组。
getNewImages(imageUrls) {
let urls = []
imageUrls.map(url => {
if (url.startsWith('data:image')) {
urls.push(url)
}
})
return urls
}
这里的图片上传，把图片转化成base64格式后上传，原图片都已经是在线图片了，新上传的图片都是base64格式的。此时就可以通过判断整个图片的地址数组里是否包含以data:image开头的字符串，若有则找到了新上传的图片，将图片上传。
1.3 repeat()
str.repeat(n)
// repeat方法返回一个新字符串，表示将原字符串重复n次
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
// 参数如果是小数，会被取整
'na'.repeat(2.9) // "nana"
// 如果repeat的参数是负数或者Infinity，会报错。
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError
// 如果参数是0到-1之间的小数，则等同于0，
'na'.repeat(-0.9) // ""
// 参数NaN等同于0。
'na'.repeat(NaN) // ""
// 如果repeat的参数是字符串，则会先转换成数字。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
小结
- 模板字符串
${} - includes() 搜索字符神器
- startsWith(), endsWith() 轻松定首尾
网友评论