<!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>

ES6-字符串的扩展-模板字符串的更多相关文章

  1. es6的新特性--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

  2. ES5-ES6-ES7_字符串扩展—模板字符串

    includes(), startsWith(), endsWith() 传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法 ...

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

    模板字符串 模板字符串:我理解为将字符串格式化.模板化,将字符串加强处理,此处的模板有动词的意思. 字符串模板基本格式: `xxxxxx`(前后都用反引号[tab键上面按键]引起来).除了作为普通字符 ...

  4. es6字符串的扩展——模板

    todo1.模板字符串 传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法). $('#result').append( 'There are <b&g ...

  5. ES6扩展——模板字符串

    ${ } 模板字符串占位符 需要用反引号` ` 1.模板字符串 `${变量}` const xiaoming = { name:'xiaoming', age:14, say1:function(){ ...

  6. ES6新特性之模板字符串

    ES6新特性概览  http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串   http://www.infoq.c ...

  7. 2、ES6结构赋值和模板字符串

    ES6允许按照一定的模式,从数组和对象中提取值,这被称为结构,即解开数据的结构 1.数组的解构赋值 let [a,b] = [1,2] let [a,b,c=100] = [1,2] //c的默认值为 ...

  8. ES6与ES5对比 模板字符串

    var title = '你好' ES5 var tpl1 = '<div>' + '<span>' + title + '</span>' '</div&g ...

  9. 深入浅出ES6（四）：模板字符串

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...

随机推荐

  1. python学习笔记1.1

  2. 201521123042 《Java程序设计》第12周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String ...

  3. JAVA课程设计-----加减法测试博客

    1.团队成员介绍(一个人做的) 谢季努:网络1513 201521123079 2.项目git地址 3.项目git提交截图 4.项目运行截图 输入答案后点击确认就会出现本次的得分 如果觉得成绩不理想点 ...

  4. linux防火墙简单的使用

    Centos升级到7之后,内置的防火墙已经从iptables变成了firewalld.所以,端口的开启还是要从两种情况来说明的,那就是iptables和firewalld.本文章参考官网教程基础 一. ...

  5. Mybatis第三篇【动态SQL】

    动态SQL 何为动态SQL??回顾一下我们之前写的SSH项目中,有多条件查询的情况,如下图 我们当时刚开始做的时候,是需要在Controller中判断SQL是否已经有条件了,因为SQL语句需要拼接起来 ...

  6. 《Java从入门到放弃》JavaSE入门篇：网络编程(入门版)

    要进行网络编程,首先要搞清楚目的是什么. 网络编程说简单点就是在网络上的计算机进行数据的交互. 既然要进行数据交互,那就需要有一个发送方和一个接受方. 按网络上的说法,就是一个攻一个受· 当然,现阶段 ...

  7. display:flex css

    本文介绍下flex的用法和属性 这个一个自适应的3列盒子 <div class="flex"> <div style="background-color ...

  8. PuTsangTo-单撸游戏开发03 碰撞与跳跃瑕疵版

    继续上一部分,游戏的定位是横版平台动作类游戏,所以得有跳跃动作,首先想到的就是物理引擎,不过在2D游戏里,仅为了角色的跳跃而引入物理引擎,目前想来有些不至于,仅使用cocos默认带有的碰撞系统也足够了 ...

  9. 用Atom打造简单的java编译器以及对于可能出现的问题解答

    如何用Atom打造简单的javaIDE 自己一直比较喜欢Atom编辑器,前段时间给Atom配置好了C/C++的运行环境,自己心里还是感觉挺好的,最近在学习java ,偶然的机会让我看到了一篇文章,就是 ...

  10. 代码与编程（java基础）

    代码与编程(面试与笔试java) 1.写一个Singleton出来 Singleton模式主要作用是保证在Java应用程序中,一个类Class只有一个实例存在. 一般Singleton模式通常有几种种 ...