# 模版字符串

  • ES6新增内容

  • 模版字符串保持字符串格式不变

    • 普通字符串
    const str = '渡荆门送别\n李白\n渡远荆门外,来从楚国游。\n山随平野尽,江入大荒流。\n月下飞天镜,云生结海楼。\n仍怜故乡水,万里送行舟。';
    console.log(str); // 输出见下图
    
    1
    2

    image-20191101150247150

    • 模版字符串
    // 普通字符串无法换行定义
    const str = `
          渡荆门送别
                  李白
    
    渡远荆门外,来从楚国游。
    山随平野尽,江入大荒流。
    月下飞天镜,云生结海楼。
    仍怜故乡水,万里送行舟。
    `;
    console.log(str); // 输出见下图
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    image-20191101150401268

  • 模版字符串中可以使用变量

    关于reduceAPI会在之后讲解

    • 普通字符串模版拼接
    const prace = {title: '渡荆门送别', autor: '李白', content: ['渡远荆门外,来从楚国游。', '山随平野尽,江入大荒流。', '月下飞天镜,云生结海楼。', '仍怜故乡水,万里送行舟。']}
    
    const render = function (accumulator, currentValue, index) {
      return index === 1 ? '<p>' + accumulator + '</p>' + '<p>' + currentValue + '</p>' : accumulator + '<p>' + currentValue + '</p>';
    }
    
    const nodes = '<article><h3>' + prace.title + '</h3><address>' + prace.autor + '</address>' + prace.content.reduce(render) + '</article>';
    
    document.write(nodes); // 输出看下图
    
    1
    2
    3
    4
    5
    6
    7
    8
    9

    image-20191101160644004

    • 在模版字符串中使用变量拼接
    const prace = {title: '渡荆门送别', autor: '李白', content: ['渡远荆门外,来从楚国游。', '山随平野尽,江入大荒流。', '月下飞天镜,云生结海楼。', '仍怜故乡水,万里送行舟。']}
    
    const render = function (accumulator, currentValue, index) {
      return index === 1 ? `<p>${accumulator}</p><p>${currentValue}</p>` : `${accumulator} <p>${currentValue}</p>`;
    }
    
    const nodes = `
    <article>
    	<h3>${prace.title}</h3>
    	<address>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;${prace.autor}</address>
    	${prace.content.reduce(render)}
    </article>
    `;
    
    document.write(nodes); // 输出看下图
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    ![image-20191101161453357](/Users/mac/Library/Application Support/typora-user-images/image-20191101161453357.png)

# .includes

  • ES6新增API

  • 判断一个字符串是否包含在另一个字符串中,返回truefalse

  • 语法str.includes(searchString[, position])

    • searchString 要搜索的字符串
    • position 从指定位置开始检索
    const str = `
          渡荆门送别
                  李白
    
    渡远荆门外,来从楚国游。
    山随平野尽,江入大荒流。
    月下飞天镜,云生结海楼。
    仍怜故乡水,万里送行舟。
    `;
    console.log(str.includes('李白')); // true
    console.log(str.includes('李白', 40)); // false 从40开始搜索,40之前的字符串会被忽略 检索不到
    // 注意字符串的定义是使用模版字符串,顾下标为0的元素是空格而不是”渡“
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

# .startsWith

  • ES6新增API

  • 判断一个字符串是否在另一个字符串的开始位置(准确说:判断当前字符串是否以一个给定的字符串开始的),返回truefalse

  • 语法str.startsWith(searchString[, position])

    • searchString 要搜索的字符串
    • position 从指定位置开始检索
    const str = '渡荆门送别李白渡远荆门外,来从楚国游。山随平野尽,江入大荒流。月下飞天镜,云生结海楼。仍怜故乡水,万里送行舟。';
    console.log(str.startsWith('渡荆门送别')); // true
    console.log(str.startsWith('渡荆门送别', 3)); // false
    
    1
    2
    3

# .endsWith

  • ES6新增API

  • 判断一个字符串是否在另一个字符串的结束位置(准确说:判断当前字符串是否以一个给定的字符串结束的),返回truefalse

  • 语法str.endsWith(searchString[, position])

    • searchString 要搜索的字符串
    • position 从指定位置开始检索 默认为str.length
    const str = '渡荆门送别李白渡远荆门外,来从楚国游。山随平野尽,江入大荒流。月下飞天镜,云生结海楼。仍怜故乡水,万里送行舟。';
    console.log(str.endsWith('万里送行舟。')); // true
    console.log(str.endsWith('万里送行舟。', 54)); // false
    
    1
    2
    3

# .padStart

  • ES8新增API

  • 用一个字符串填充当前字符串到指定长度。从字符串左侧开始填充

  • 适用场景: 月份补0,倒计时时分秒补0

  • 语法str.padStart(targetLength [, padString])

    • targetLength 目标长度。如果目标长度小于当前字符串长度,会返回字符串本身
    • padString 填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断。此参数的缺省值为 " "
    const date = new Date();
    const minutes = date.getMinutes();
    
    1
    2

console.log(${minutes}.padStart(2, '0')); // 如果你获取到的分钟数是一位,那么你此时可以看到会在开始位置补0



## .padEnd

* ES8新增API

* 用一个字符串填充当前字符串到指定长度。从字符串右侧开始填充

* 语法`str.padEnd(targetLength [, padString])`

* **targetLength** 目标长度。如果目标长度小于当前字符串长度,会返回字符串本身
* **padString** 填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断。此参数的缺省值为 " "

```js
const str = '渡远荆门外,';
console.log(str.padEnd(18, '来从楚国游。')); // 渡远荆门外,来从楚国游。来从楚国游。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# .trim

  • 删除字符串两端的空白;空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符(如 LF,CR等)
  • 适用场景: input表单验证表单提交
  • 语法str.trim()
<template>
	<div class="container">
    <input type="text" v-model="value" />
    <button @click="handleSubmit">
      提交
  	</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
    };
  },
  methods: {
    handleSubmit() {
      const value = this.value.trim(); // 去除字符串两端空白
      // ........ 业务逻辑
    }
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# .trimStart

  • ES10 新增API
  • 去除字符串开始位置(左侧)空白
  • 语法str.trimStart()
const str =  `
渡远荆门外

		`;
console.log(str.trimStart());
1
2
3
4
5

# .trimEnd

  • ES10 新增API
  • 去除字符串结束位置(右侧)空白
  • 语法str.trimEnd()
const str =  `
渡远荆门外

		`;
console.log(str.trimEnd());
1
2
3
4
5

# .repeat

  • ES6 新增API
  • 将一个字符串重复N次,并返回一个新的字符串
  • 语法const resultString = str.repeat(count);
    • count要重复的次数 Number类型,不能为负数,如果传入的是String会先转换成Number,如果是小数会向下取整
const str = '渡远荆门外';
console.log(str.repeat(2)); // 渡远荆门外渡远荆门外
1
2

# .split

  • 根据指定字符将字符串分割成数组
  • 语法str.split([separator[, limit]])
    • separator指定分割的字符,可以为正则表达式 可选 如果不传返回 [str]
    • limit 限制分割数组长度 如果长度超过本身可分割后的长度或为负数 都会返回本身可分割的数组
const str = ' 渡 远 荆 门 外 ';
console.log(str.split()); // [" 渡 远 荆 门 外 "]
console.log(str.split('')); // (11) [" ", "渡", " ", "远", " ", "荆", " ", "门", " ", "外", " "]
console.log(str.split('', -1)); // (11) [" ", "渡", " ", "远", " ", "荆", " ", "门", " ", "外", " "]
console.log(str.split('', 3)); // [" ", "渡", " "]
console.log(str.split('', 20)); // (11) [" ", "渡", " ", "远", " ", "荆", " ", "门", " ", "外", " "]
1
2
3
4
5
6
Last Updated: 4/27/2020, 10:56:04 PM