模板字符串:我理解为将字符串格式化、模板化,将字符串加强处理,此处的模板有动词的意思。
字符串模板基本格式: `xxxxxx`(前后都用反引号【tab键上面按键】引起来)。除了作为普通字符串 外;还可以用来定义多行字符串;也可以在字符串中插入变量和表达式,进行字符串内容扩充和计算。
1、普通字符串:
let testStr = `ES6 TestDemo`; console.log(testStr); // ES6 TestDemo
2、普通字符串 添加标签、换行符:
let testStr = `ES6 TestDemo <H1>index文件</H1> \n 换行显示`; document.write(testStr); console.log(testStr);
图1:页面显示内容 图2:控制台打印内容
3、多行字符串:
let testStr = `ES6 TestDemo, index文件,<br/>换行显示`; document.write(testStr); console.log(testStr);
4、字符串内插入变量、表达式和方法:变量名、表达式和方法都写在 ${} 中,如 ${xxxxxx} 。
let parStr1 = "TestDemo"; // 变量 let parStr2 = '16:42'; let parNum = 20; let testFun = function testFun() { // 方法 return '测试方法!'; }; // function testFun(){ // 方法 // return '测试方法!'; // } let testStr = `ES6 ${parStr1},当前时间 ${parStr2}, 今天是放假的第${parNum + 1}天,一共放假${(parNum + 1) * 24}小时了。现在执行下${testFun()}`; // ${parStr1}、${parStr2}是变量,${parNum + 1}、${(parNum + 1)*24}、${testFun()}是表达式 (注:两种声明方法都能正常执行) document.write(testStr); console.log(testStr);
模版字符串功能很强大,实际开发过程中,可以写一个活动页面或拼接页面,然后通过组件挂载 或ajax请求参数加载 然后显示给用户。
同时需要注意的是 模板字符串中的换行('\n',<br/>)、空格( ),以及HTML标签,浏览器渲染时都会正常渲染出来;但控制台打印时,代码是怎样的,打印出来也就是怎样的。
let testStr = `<b>ES6</b> ${parStr1},当前时间 ${parStr2}, 今天是放假的第${parNum + 1}天,一共放假${(parNum + 1) * 24}小时了。 现在执行下${testFun()}`;
字符串新增方法很多:
联系客服