<!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. 201521123030《Java程序设计》第1周学习总结

    #1. 本章学习总结 你对于本章知识的学习总结 了解了java的发展简介 认识了jvm/jre/jdk的联系,学习安装jdk java好麻烦的说... 1.为什么java程序可以跨平台运行?执行jav ...

  2. Servlet第五篇【介绍会话技术、Cookie的API、详解、应用】

    什么是会话技术 基本概念: 指用户开一个浏览器,访问一个网站,只要不关闭该浏览器,不管该用户点击多少个超链接,访问多少资源,直到用户关闭浏览器,整个这个过程我们称为一次会话. 为什么我们要使用会话技术 ...

  3. Activiti-05-.Deployment and MN 2.0 Introduction

    Business archives (业务归档) 为了部署流程,业务档案必须被封装,业务档案是activiti 引擎部署的单元,它相当于zip文件,它包含BPMN 2.0 processes, tas ...

  4. tomcat The specified JRE installation does not exist

    window->perferences->server->installed runtimes 里tomcat删掉,重新建立服务,再运行

  5. thinkphp5.0无限极分类及格式化输出

    首先我们来看数据表 从上图中可以发现,中国下有贵州,北京两个子节点,而北京有天安门一个子节点,纽约的子节点是"纽约的子类". 从pid为0看出,中国和纽约是顶级节点. 因为贵州的p ...

  6. OC Block网上转载

    1.block是一个特殊的OC对象, 它建立在栈上, 而不是堆上, 这么做一个是为性能考虑,还有就是方便访问局部变量. 2.默认情况下block使用到的局部变量都会被复制,而不是保留.所以它无法改变局 ...

  7. java GUI编程二

    java基础学习总结--GUI编程(二) 一.事件监听 测试代码一: 1 package cn.javastudy.summary; 2 3 import java.awt.*; 4 import j ...

  8. js 递归函数的使用及常用函数

    1.递归函数的使用: 公园里有一堆桃子,猴子每天吃掉一半,挑出一个坏的扔掉,第6天的时候发现还剩1个桃子,问原来有多少个桃子 var peache;function peaches(n) { if ( ...

  9. 线段树专题—ZOJ1610 Count the Colors（涂区间，直接tag标记）

    Painting some colored segments on a line, some previously painted segments may be covered by some th ...

  10. asp.net mvc 自动化测试工具

    好久不写文章了,一直忙在项目中. 前一阵发现公司一个项目,体积巨大.业务很复杂.基于历史原因,项目基于mvc 2迁移过来,视图大多还是aspx  作为视图承载. 控制器中的方法  更是一个比一个多. ...