ES6--模板字符串

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

1. 普通字符串

console.log(`好好学习 \n 天天向上`)
复制代码

2. 多行字符串在编辑器中的换行，浏览器也会解析

console.log(`好好学习 
            天天向上`)
复制代码

3. 字符串中嵌入变量

let name = "Bob", time = "today"; 
`Hello ${name}, how are you ${time}?`
复制代码

4. 如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

console.log(`\`Yo\` world`)
复制代码

5. .如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中

 let str = `<ul>
             	 <li>沈腾</li>
                 <li>玛丽</li>
                 <li>魏翔</li>
                 <li>艾伦</li>
             </ul>`
console.log(str)
document.getElementById("result").innerHTML=str
复制代码

6. 模板字符串中嵌入变量，需要将变量名写在${}之中。大括号内部可放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

let x = 1; 
let y = 2; 
`${x} + ${y} = ${x + y}`
复制代码

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

function fn() { return "Hello World"; } 
`foo ${fn()} bar`
复制代码

模板字符串中到的方法

1. includes 方法
   includes()：返回布尔值，表示是否找到了参数字符串

判断当前浏览器

if(navigator.userAgent.includes("Chrome")){
	alert("当前的浏览器是Chrome")
}else if(navigator.userAgent.includes("Firefox")){
	alert("当前的浏览器是Firefox")
}
复制代码

判断是否含有某个字符串

let str = "apple banana2 pear"; 
alert(str.includes("apple"))
复制代码

2. startsWith() 返回布尔值 判断头部是否包含某字符串

var s = "Hello world!";
console.log(s.startsWith('H')) //true
复制代码

endsWith 判断尾部是否包含某字符串

var s = "Hello world!"; 
console.log(s.endsWith('world!',12)) //可以指定第二个参数表示针对前几个字符
复制代码

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

var s = "hello<br>" 
document.write(s.repeat(10))
复制代码

4. padStart()用于头部补全，padEnd()用于尾部补全。

console.log("xx".padStart(5,"ab")) 
console.log("x".padStart(5,"ab")) 
console.log("xxx".padEnd(7,"qqq"))
复制代码

• 第一个参数表示补全后字符串的长度
• 第二个参数表示是需要添加的字符串

5. trimStart()消除字符串头部的空格，trimEnd() 消除尾部空格
   trim() 消除字符串前后的空格

const s = ' abc '; 
s.trim() 
s.trimStart() 
s.trimEnd()
复制代码