ES6——模板字符串

语法

`...${
      
      ...}...`

变量的嵌套

var s1 = `hello vue`;
`xxx ${
      
      s1} xxx` //xxx hello vue xxx

${}里面可以插入任何js表达式，还可以是一个对象、数组，甚至是一个函数。

对象或者数组会调用它们的tostring()方法

var obj = {
    
    a:1,b:2};
`xxx ${
      
      obj} xxx`//xxx [object Object] xxx
var arr = [1,2,3];
`xxx ${
      
      arr} xxx`//xxx 1,2,3 xxx

函数分两种情况：

• 函数本身，同样会调用它的tostring()方法
• 直接调用函数，则输出函数的返回值

var fn1 = function(){
    
    
console.log('hello vuex');
}
var fn2 = function(){
    
    
return 'hello vue-router'
}
`xxx ${
      
      fn1}`//xxx function fn(){....}
`xxx ${
      
      fn1()}`//xxx underfind
`xxx ${
      
      fn2()}`//xxx hello vue-router

如果{}里面的变量是个不存在的变量呢？

> `xxx ${
      
      sss}`
Uncaught ReferenceError: sss is not defined at <anonymous>

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

---

字符串的拓展

• 1.字符串的Unicode表示法
• 2.includes()、startsWith()、endsWith()
• 3.repeat
• 4.模板字符串

字符串的Unicode表示法

// js有6种方法表示一个字符
'\z' === 'z' // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

包含字符判断方法

includes()、startsWith()、endsWith()
传统的只有indexOf()方法确定一个字符串是否包含在另一个中

vas s = 'hello world'
s.includes('o') // true
s.startsWith('h') // true
s.endsWith('d') // true
// 第二个参数
s.startsWith('world', 6) // true
s.endsWith('hello', 5) // true
s.includes('hello', 6) // false
//使用第二个参数时endsWith的表示针对前n个字符，其他两个针对从第n个位置到字符串结束位置之间的字符

repeat

repeat方法返回一个新字符串，将原字符串重复n次

'x'.repeat(3) // 'xxx'
'xx1'.repeat(0) // ''
'xx1'.repeat(2.9) // 'xx1xx1' 小数直接取整
'xx'.repeat(-2) // RangeError 参数是负数或者Infinity报错
'xx'.repeat(-0.7) // '' 参数(-1,0) 等同于0 因为会进行取整为 -0
'xx'.repeat(NaN) // '' 参数NaN等同于0
'xx'.repeat('nn') // '' 参数字符串会先转换为数字 'nn'=>NaN

字符串补全

padStart() padEnd()
第一个参数是指定字符串的最小长度，第二个参数是用来补齐的字符串

'x'.padStart(4,'ab') // 'abax'
'x'.padEnd(4,'ab') // 'xaba'
'xxx'.padEnd(2,'ab') // 'xxx' 原字符串长度大于指定的最小长度，返回原字符串
'x'.padEnd(4) //'x   ' 省略第二个参数 默认用空格补齐
// padStart 常用于补齐指定位数
'123'.padStart(10,'0') // '0000000123'

模板字符串

// 运算
var x = 1
var y = 2
`${
      
      x} + ${
      
      y+2} = ${
      
      x+y+2}` // 1 + 4 = 5
// 调用函数
function fn () {
    
    
  return 'chenxuan'
}
`i am ${
      
      fn()}`  // i am chenxuan

---

es6语法说明

文档中会存在es6语法, 这里简单说明一下, 其中IE不支持es6语法

概览

• let const
• 模板字符串
• 对象中属性方法简写
• 箭头函数
• 解构

这里只是简单说明, 有兴趣可以看大神阮一峰的资料

let与const

//lES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
{
    
    
	let a = 10;
	var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
//const声明一个只读的常量。一旦声明，常量的值就不能改变。
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.

模板字符串

//模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
 not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${
      
      name}, how are you ${
      
      time}?`

对象中属性方法简写

//常规写法
var name = 'zs';
var obj = {
    
    
	name: name,
	run: function(){
    
    
		console.log('haha');
	}
}
//简写
let name = 'zs';
let obj = {
    
    
	name,
	run(){
    
    
		console.log('haha');
	}
}

箭头函数

//常规写法
setTimeout(function(){
    
    
	//...
}, 1000);
//简写
setTimeout(() => {
    
    
	//...
}, 1000);

解构

//假如现在有一个对象
let obj = {
    
    
	name: 'zs',
	age: 18,
	address: 'beijing',
}
//正常获取name
var name = obj.name
//解构写法
let {
    
     name } = obj
//也可以多个
let {
    
     name, age, address } = obj;
//如果不存在也可以声明默认值
let {
    
     name, age, address, status = '1' } = obj;
//想添加一条属性
obj.status = '1';
//对象属性合并
var newObj = {
    
    
	...obj,
	status: '1'
}
//方法传参
function calc(data){
    
    
	var a = data.a;
	var b = data.b;
	return a + b;
}
//解构传参
function calc({
    
     a, b }){
    
    
	return a + b;
}