模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
- 普通字符串
console.log(`好好学习 \n 天天向上`)
- 多行字符串在编辑器中的换行,浏览器也会解析
console.log(`好好学习
天天向上`)
- 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
- 如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
console.log(`\`Yo\` world`)
- .如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中
let str = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>`
console.log(str)
document.getElementById("result").innerHTML=str
- 模板字符串中嵌入变量,需要将变量名写在${}之中。大括号内部可放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。
let x = 1;
let y = 2;
`${x} + ${y} = ${x + y}`
- 模板字符串之中还能调用函数。
function fn() { return "Hello World"; }
`foo ${fn()} bar`
模板字符串中到的方法
- 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"))
- startsWith() 返回布尔值 判断头部是否包含某字符串
var s = "Hello world!";
console.log(s.startsWith('H')) //true
endsWith 判断尾部是否包含某字符串
var s = "Hello world!";
console.log(s.endsWith('world!',12)) //可以指定第二个参数表示针对前几个字符
- repeat 方法返回一个新字符串,表示将原字符串重复 n 次
var s = "hello<br>"
document.write(s.repeat(10))
- padStart()用于头部补全,padEnd()用于尾部补全。
console.log("xx".padStart(5,"ab"))
console.log("x".padStart(5,"ab"))
console.log("xxx".padEnd(7,"qqq"))
- 第一个参数表示补全后字符串的长度
- 第二个参数表示是需要添加的字符串
- trimStart()消除字符串头部的空格,trimEnd() 消除尾部空格
trim() 消除字符串前后的空格
const s = ' abc ';
s.trim()
s.trimStart()
s.trimEnd()