字符串

胖大人本胖 共 1.9k 字 预计 21 分钟
  1. 1. 模版字符串
  2. 2. .includes
  3. 3. .startsWith
  4. 4. .endsWith
  5. 5. .padStart
  6. 6. .padEnd
  7. 7. .trim
  8. 8. .trimStart
  9. 9. .trimEnd
  10. 10. .repeat
  11. 11. .split

模版字符串

  • ES6新增内容

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

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

    image-20191101150247150

    • 模版字符串
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 普通字符串无法换行定义
    const str = `
          渡荆门送别
                  李白

    渡远荆门外，来从楚国游。
    山随平野尽，江入大荒流。
    月下飞天镜，云生结海楼。
    仍怜故乡水，万里送行舟。
    `;
    console.log(str); // 输出见下图

    image-20191101150401268

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

    关于reduceAPI会在之后讲解

    • 普通字符串模版拼接
    1
    2
    3
    4
    5
    6
    7
    8
    9
    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); // 输出看下图

    image-20191101160644004

    • 在模版字符串中使用变量拼接
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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); // 输出看下图

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

.includes

  • ES6新增API

  • 判断一个字符串是否包含在另一个字符串中，返回true或false

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

    • searchString 要搜索的字符串
    • position 从指定位置开始检索
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const str = `
          渡荆门送别
                  李白

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

.startsWith

  • ES6新增API

  • 判断一个字符串是否在另一个字符串的开始位置（准确说：判断当前字符串是否以一个给定的字符串开始的），返回true或false

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

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

.endsWith

  • ES6新增API

  • 判断一个字符串是否在另一个字符串的结束位置（准确说：判断当前字符串是否以一个给定的字符串结束的），返回true或false

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

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

.padStart

  • ES8新增API

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

  • 适用场景： 月份补0，倒计时时分秒补0

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

    • targetLength 目标长度。如果目标长度小于当前字符串长度，会返回字符串本身
    • padString 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为 “ “
    1
    2
    3
      const date = new Date();
      const minutes = date.getMinutes();
    console.log(`${minutes}`.padStart(2, '0')); // 如果你获取到的分钟数是一位，那么你此时可以看到会在开始位置补0

.padEnd

  • ES8新增API

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

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

    • targetLength 目标长度。如果目标长度小于当前字符串长度，会返回字符串本身
    • padString 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为 “ “
1
2
const str = '渡远荆门外，';
console.log(str.padEnd(18, '来从楚国游。')); // 渡远荆门外，来从楚国游。来从楚国游。

.trim

  • 删除字符串两端的空白；空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR等）
  • 适用场景： input表单验证表单提交
  • 语法str.trim()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>

.trimStart

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

		`;
console.log(str.trimStart());

.trimEnd

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

		`;
console.log(str.trimEnd());

.repeat

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

.split

  • 根据指定字符将字符串分割成数组
  • 语法str.split([separator[, limit]])
    • separator指定分割的字符，可以为正则表达式 可选 如果不传返回 [str]
    • limit 限制分割数组长度 如果长度超过本身可分割后的长度或为负数 都会返回本身可分割的数组
1
2
3
4
5
6
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) [" ", "渡", " ", "远", " ", "荆", " ", "门", " ", "外", " "]