Strings.md

Posted on | In

String

Template Strings

  1. 字符串模板改变了链接字符串的方式
    • 使用方式： ``符号
    • 在字符串中插入变量${}
    • 字符串模板函数
    • 会保留字符串内的空格， 换行， 但是如果设计到转义字符，必须要使用\

Tagged Templates

劫持原有的字符渲染，由函数接管渲染。

1
2
3
4
5
6
7
8
9
10
11
12

const sum = 12.5;
const msg = format`sum is: ${sum}`;
console.log(msg);
// 然后解读一下入参：
// str: 非变量分割的字符串数组， 在这个例子中为['sum is: ', '']
// ...value: 变量以数组的形式传入第二个参数
function format (str, ...value) {
    debugger
    // 这里返回的就是最终的字符串了
    return `${str[0]}$${value[0]}`;
}

知道吗， 这个函数最大的作用就是国际化.在我们$t(‘sayHi’)这样的国际化里， 其实本质上也是一个函数，这个函数通过检测用户语言，然后根据翻译字典去显示对应的内容.

还有就是金额格式化.

Applying Tagged Templates

  1. 定制log函数， 检测字符串变量， 如果是object就把他转成json字符串
  2. 写一个正则表达式的翻译工具， 允许换行和切分正则，最后使用tagged tamplates转成符合格式的正则即可。增加正则的可读性。
  3. 所以，在你的模板字符串里， 你可以写任意你像写的语法，使用好tagged templates就想当于有一个小型的模板引擎。

String padding and String Trimming—–ES2017/ES2019

  1. String padding 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var str = 'Hello';

    str.padStart(5);
    str.padStart(8);
    str.padStart(8, '-');
    str.padStart(8, '*');

    str.padEnd(5);
    str.padEnd(8);
    str.padEnd(8, '-');
    str.padEnd(8, '*');
  2. String trim
    1
    2
    3
    4
    var str = '  Hello    ';
    str.trim();
    str.trimStart();
    str.trimEnd();