前端设计

模板字符串

2023-04-08

模板字符串

模板字符串(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());