A-A+

ES6-字符串的扩展-模板字符串

2017年10月19日 javascript, Web开发 暂无评论 阅读 101 views 次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){

//模板字符串,需将原本的双引号(单引号)改成`
//模板字符串中嵌入变量,需要将变量名写在${}之中,示例:

var name="卧槽";
var sex="男";
alert("我只想说:"+name); //使用普通字符串
alert(`我只想说:${name}`); //使用模板字符串
/*
原写法:
//$("table").append("<tr><td>"+name+"</td><td>"+sex+"</td><tr>");
//模板写法:
$("#table").append(`<tr><td>${name}</td><td>${sex}</td><tr>`);
*/
//省去了拼接字符串的麻烦之处,
//如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中,
//但可以使用trim方法消除它

//大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。
var num1=5;
var num2=5;
alert(`${num1}+${num2}=${num1+num2}`);

//如果是一个对象,将默认调用对象的toString方法。
var obj = {x: 1, y: 2};
alert(`${obj.x + obj.y}`);

//甚至还可以调用函数(我的天,我特么的早点知道该多好)
function a(){
return "卧槽";
}
alert(`我只想说:${a()}`);

//大括号内也可以直接写字符串
alert(`说不完的${"卧槽"}`);

//还能嵌套使用,例

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));

//如果需要引用模板字符串本身,在需要时执行,可以像下面这样写。
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
alert(func('Jack')); // "Hello Jack!"

//标签模板功能
//它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串
alert`一样的卧槽`;
alert("一样的卧槽");
//标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。

//除此之外,你甚至可以使用标签模板,在JavaScript语言之中嵌入其他语言。
/*比如JQuery和Java
java`
class HelloWorldApp {
public static void main(String[] args) {
System.out.println(“Hello World!”); // Display the string.
}
}
`
HelloWorldApp.main();
请在jsp页面尝试
*/
//String.raw()方法
//String.raw方法,往往用来充当模板字符串的处理函数,
//返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。
alert("Hi\n!");
//hi
//!
alert(String.raw`Hi\u000A!`);
//Hi\u000A!
//如果原字符串的斜杠已经转义,那么String.raw不会做任何处理。
alert(String.raw({ raw: 'test' }, 0, 1, 2));
};
</script>
</head>

<body>
</body>
</html>

打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

标签:

给我留言

您必须 登录 才能发表留言!

Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: