ES6 - 基础学习(4): 模板字符串和字符串新增方法

模板字符串

　　模板字符串：我理解为将字符串格式化、模板化，将字符串加强处理，此处的模板有动词的意思。

　　字符串模板基本格式： `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()}`;    

　　　　

符串新增方法

　　字符串新增方法很多：