字符串和正则表达式

更好的Unicode支持

  • 字符串里的字符有两种，一种是由一个编码单元16位表示的BMP字符；一种是由两个编码单元32位表示的辅助平面字符
  • es6强制使用UTF-16字符串编码来解决上述问题，并按照编码来标准化字符串操作，专门增加了专门针对代理对的功能

增加的方法

  • codePointAt()
    • 描述：接受编码单元的位置而非字符串位置作为参数，返回与字符串中给定位置对应的码位，即一个整数值
    • 检测一个字符占用的编码单元数量
1
2
3
4
5
// 用16位表示的字符集上界为十六进制FFFF，所有超过这个上界的码位一定由两个编码单元来表示，总共有32位
function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}
console.log(is32Bit('𠮷')); // true

  • String.fromCodePoint()方法

    • 描述：根据指定的码位生成一个字符。可以有效的处理代理对哦
      1
      console.log(String.fromCodePoint(134071)); // 𠮷

  • normalize()

    • 描述：标准化字符串

  • 正则表达式 u 修饰符

    • 描述：当一个正则表达式添加了u修饰符时，它就从编码单元操作模式切换为字符模式
      1
      2
      3
      const text = '𠮷';
      console.log(/^.$/u.test(text)); // true
      console.log(/^.$/.test(text)); // false

  • 计算码位数量（注意length返回的时字符串编码单元的数量）

    1
    2
    3
    4
    5
    6
    function codePointLength(text) {
    	let result = text.match(/[\s\S]/gu);
      	return result ? result.length : 0;
    }

    console.log(codePointLength('𠮷abc')); // 4

  • 检测u修饰符

    1
    2
    3
    4
    5
    6
    7
    8
    function hasRegExpU(){
    	try {
        	var pattern = new RegExp('.', 'u');
          	return true;
        } catch (ex) {
        	return false;
        }
    }

其他字符串变更

字符串中的字串识别

  • includes(要搜索的文本, 指定一个开始搜索的位置(可选的))
    • 如果在字符串中检测到指定文本则返回true,否则返回false
  • startsWith(要搜索的文本, 指定一个开始搜索的位置(可选的))
    • 如果在字符串的起始部分检测到指定文本则返回true，否则返回false
  • endsWith(要搜索的文本, 指定一个开始搜索的位置(可选的))
    • 如果在字符串的结束部分检测到指定文本则返回true，否则返回false
    • 注意如果有第二个参数，该方法从字符串长度减去这个索引值的位置开始搜索匹配
  • repeat(number)
    • 返回当前字符串重复一定次数后的新字符串
1
2
3
4
5
const msg = 'Hello world!';
console.log(msg.startsWith('Hello')); // true
console.log(msg.includes('Hello')); // true
console.log(msg.endsWith('Hello')); // false
console.log('x'.repeat(4)); // xxxx

模版字面量

  • es6通过模版字面量的方式补充了以下es5缺少的几点
    • 一个正式的多行字符串的概念
    • 将变量的值嵌入字符串的能力
    • 向HTML插入经过安全转换后的字符串的能力
多行字符串
1
2
3
4
5
6
7
8
9
10
11
12
13
// es6之前版本的实现
const message = 'Multiline \
string';

// 手动加入换行
const message2 = 'Multiline \n\
string';

// 数组拼接的方式实现多行字符串
const message3 = ['message', 'string'].join('\n');

// er6版本实现
// 如果你需要在字符串中添加新的一行，只需在代码中直接换行，此处的换行将同步出现在结果中
字符串占位符

  • 占位符由一个左侧的${和右侧的}符号组成，中间可以包含任意的JavaScript表达式。

    1
    2
    3
    let name = 'Nicholas',
        message = `Hello, ${name}`;
    console.log(message);

  • 标签模版

    • 标签的模版的真正威力位于标签模版，每个模版标签都可以进行模版字面量上的转换并返回最终的字符串值
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      // tag就是标签
      let message = tag`Hello world`;

      // 使用
      function tag() {
       	 return 'chic'
      }

      let count = 10;
      let price = 0.25;
      let message = tag`${count} times cost $${(count*price).toFixed(2)}`;

      console.log(message); // chic

      // 实验二，注意标签函数的参数哦
      function tag(literals, ...substitutions) {
       	// literals  ["", "times cost $", "", raw: Array(3)]
        	// substitutions [10, "2.50"]
        let result = '';
        for (let i = 0; i < substitutions.length; i++) {
        	result += literals[i];
          result += substitutions[i];
        }
        
        result += literals[literals.length - 1];
        return result;
      }

      let count = 10;
      let price = 0.25;
      let message = tag`${count} times cost $${(count*price).toFixed(2)}`;
      console.log(message); // 10 times cost $2.50

  • 模版字面量中使用原始值

    1
    2
    let message1 = String.raw`<p>sds\ndsd</p>`;
    console.log(message1); // <p>sds\\ndsd</p>

函数

函数形参的默认值

  • es6中默认参数值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // es5中函数模拟默认参数
    function makeRequest(url, timeout, callback) {
    	timeout = timeout || 2000;
      	callback = callback || function() {};
      
      // 函数其余部分
    }

    // 只有当不为第二个参数传入值或主动为第二个参数传入undefined时才会使用timeout的默认值
    function makeRequest2(url, timeout = 2000, callback = function(){}) {
    	// 函数其余部分
    }

  • 默认参数对arguments对象的影响