模板字符串

·  阅读 85

模板字符串

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

模板字符串的优点

1.字符串新写法 加强版的引号

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

2.内容中可以直接出现换行符

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

3.字符串中嵌入变量

let name=`黄天霸`;
let skill=`杀富济贫`;
document.write(`<font color="red">${name}</font>的主要技能是${skill}<br>`);
复制代码

4.转义符

document.write(``哈哈``);
复制代码

5.保留空格

let str=`<ul style="list-style:none;">
			<li>沈腾</li>
			<li>玛丽</li>
			<li>艾伦</li>
		</ul>`;
console.log(str);
document.getElementById("result").innerHTML=str;
复制代码

相关的其它用法、方法

includes()

返回布尔值,表示是否找到了参数字符串

// 监测浏览器
    if(navigator.userAgent.includes('Chrome')){
            alert("当前浏览器是chrome");
    }else if(navigator.userAgent.includes('Firefox')){
            alert("是Firefox")
    }
复制代码

startsWith

判断头部是否包含字符串

let s="Hello world!";
    console.log(s.startsWith("Hello"));
    console.log(s.startsWith("Hello",0));
复制代码

endsWith

判断尾部是否包含字符串

console.log(s.endsWith("world!"));
console.log(s.endsWith("world!",12));
复制代码

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

let t="hello<br>";
document.write(t.repeat(10))
复制代码

padStatrt(len,str)和padEnd()

padStatrt(len,str) 用与头部补全 padEnd()用于尾部补全

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

trimStart() trimEnd() trim()

trimStart()消除字符串头部的空格,trimEnd()消除尾部空格,trim消除头部与尾部的空格

let str=" 路的尽头还是路 "
    document.write(str.trim());
    document.write(str.trimStart());
    document.write(str.trimEnd());
复制代码
分类:
前端
分类:
前端