ES6学习笔记二

时间：2022-11-15 06:44:52

字符串遍历

　　var str = 'hello';

for(let s of str){console.log(s += ' ')}

　　//h e l l o

字符串查找：添加了include(str,index)：返回布尔值，表示是否找到了参数字符串，index表示查找开始位置，默认0

　　　　　　startsWith(str,index):返回布尔值，表示在字符串头部是否找到参数字符串，index同上

　　　　　　endsWith(str,index):返回布尔值，表示在字符串尾部是否找到参数字符串，index同上

重复字符串：‘x’.repeat(3) //xxx   重复字符串，参数表示重复次数，如果是小数则取整，不会四舍五入；如果是负值或者Infinity则报错

字符串补全：padStart(length,str) ：在字符串开始位置补全字符串，length表示长度。str表示补全的内容

　　　　　　padEnd(length,str)：在字符串尾部补全字符串，length表示长度。str表示补全的内容

　　　　　　如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串；如果str省略则用空格代替。

模板字符串：

　　传统的模板字符串：var str = '<div>...</div>'+ value+'<div></div>';的方式拼接字符串

　　ES6引入模板字符串（反引号）的方式 var str =  `<div>...</div><ul><li>1111</li><li>${value}</li></ul>`;

　　如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。如果你不想要这个换行，可以使用trim方法消除它。

　　var str =  `<div>...</div><ul><li>1111</li><li>${value}</li></ul>`.trim();

　　模板字符串中嵌入变量，需要将变量名写在${}之中。大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

　　模板字符串之中还能调用函数。

　　　　function fn(){return 'world'}

　　`hello ${ fn() }`   //hello world

　　模板字符串甚至还能嵌套。

const tmpl = addrs => `

  <table>

  ${addrs.map(addr => `

    <tr><td>${addr.first}</td></tr>

    <tr><td>${addr.last}</td></tr>

  `).join('')}

  </table>
const data = [

    { first: '<Jane>', last: 'Bond' },

    { first: 'Lars', last: '<Croft>' },

];

console.log(tmpl(data));

// <table>

//

//   <tr><td><Jane></td></tr>

//   <tr><td>Bond</td></tr>

//

//   <tr><td>Lars</td></tr>

//   <tr><td><Croft></td></tr>

//

// </table>

如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。

// 写法一

let str = 'return ' + '`Hello ${name}!`';

let func = new Function('name', str);

func('Jack') // "Hello Jack!"

// 写法二

let str = '(name) => `Hello ${name}!`';

let func = eval.call(null, str);

func('Jack') // "Hello Jack!"

模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

var a = 5;

var b = 10;

tag`Hello ${ a + b } world ${ a * b }`;

// 等同于

tag(['Hello ', ' world ', ''], 15, 50);

上面代码中，模板字符串前面有一个标识名tag，它是一个函数。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。

函数tag依次会接收到多个参数。

function tag(stringArr, value1, value2){

  // ...

}

// 等同于

function tag(stringArr, ...values){

  // ...

}

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。

tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。

tag函数所有参数的实际值如下。

  • 第一个参数：['Hello ', ' world ', '']
  • 第二个参数: 15
  • 第三个参数：50

也就是说，tag函数实际上以下面的形式调用。

tag(['Hello ', ' world ', ''], 15, 50)

我们可以按照需要编写tag函数的代码。下面是tag函数的一种写法，以及运行结果。

var a = 5;

var b = 10;

function tag(s, v1, v2) {

  console.log(s[0]);

  console.log(s[1]);

  console.log(s[2]);

  console.log(v1);

  console.log(v2);

  return "OK";

}

tag`Hello ${ a + b } world ${ a * b}`;

// "Hello "

// " world "

// ""

// 15

// 50

// "OK"

下面是一个更复杂的例子。

var total = 30;

var msg = passthru`The total is ${total} (${total*1.05} with tax)`;

function passthru(literals) {

  var result = '';

  var i = 0;

  while (i < literals.length) {

    result += literals[i++];

    if (i < arguments.length) {

      result += arguments[i];

    }

  }

  return result;

}

msg // "The total is 30 (31.5 with tax)"

上面这个例子展示了，如何将各个参数按照原来的位置拼合回去。

passthru函数采用rest参数的写法如下。

function passthru(literals, ...values) {

  var output = "";

  for (var index = 0; index < values.length; index++) {

    output += literals[index] + values[index];

  }

  output += literals[index]

  return output;

}

“标签模板”的一个重要应用，就是过滤HTML字符串，防止用户输入恶意内容。

var message =

  SaferHTML`<p>${sender} has sent you a message.</p>`;

function SaferHTML(templateData) {

  var s = templateData[0];

  for (var i = 1; i < arguments.length; i++) {

    var arg = String(arguments[i]);

    // Escape special characters in the substitution.

    s += arg.replace(/&/g, "&amp;")

            .replace(/</g, "&lt;")

            .replace(/>/g, "&gt;");

    // Don't escape special characters in the template.

    s += templateData[i];

  }

  return s;

}

上面代码中，sender变量往往是用户提供的，经过SaferHTML函数处理，里面的特殊字符都会被转义。

var sender = '<script>alert("abc")</script>'; // 恶意代码

var message = SaferHTML`<p>${sender} has sent you a message.</p>`;

message

// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

标签模板的另一个应用，就是多语言转换（国际化处理）。

i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`

// "欢迎访问xxx，您是第xxxx位访问者！"

相关文章