ES6——模板字符串

蔚落 2021-06-26 16:06 538阅读 0赞

## 语法 ##

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

## 变量的嵌套 ##

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
 *  模板字符串
 *  对象中属性方法简写
 *  箭头函数
 *  解构

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

### `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;
    }

[Link 1]: https://es6.ruanyifeng.com/