字符串遍历
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, "&") .replace(/</g, "<") .replace(/>/g, ">"); // 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><script>alert("abc")</script> has sent you a message.</p>
标签模板的另一个应用,就是多语言转换(国际化处理)。
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!` // "欢迎访问xxx,您是第xxxx位访问者!"
来源:https://www.cnblogs.com/rancheer/p/6183539.html