字符串的扩展

素颜马尾好姑娘i 2021-07-24 23:27 577阅读 0赞

字符串的扩展

字符的unicode表示法字符串的遍历器接口直接输入U 2028和U 2029json.stringify()的改造模板字符串

模板编译标签模板模板字符串的限制

字符串的unicode表示法：es6加强对unicode的支持，允许采用uxxxx形式表示一个字符

"\u0061"
    // "a"

这种表示法只限于码点在u0000~uFFFF之间的字符

"\uD842\uDFB7"
    // "?"
    
    "\u20BB7"
    // " 7"

"\u{20BB7}"
    // "?"
    
    "\u{41}\u{42}\u{43}"
    // "ABC"
    
    let hello = 123;
    hell\u{6F} // 123
    
    '\u{1F680}' === '\uD83D\uDE80'
    // true

大括号表示法与四字节的 UTF-16 编码是等价

'\z' === 'z'  // true
    '\172' === 'z' // true
    '\x7A' === 'z' // true
    '\u007A' === 'z' // true
    '\u{7A}' === 'z' // true

字符串的遍历器接口

for...of循环遍历

for (let codePoint of 'foo') {
      console.log(codePoint)
    }
    // "f"
    // "o"
    // "o"

> 最大的优点是可以识别大于0xFFFF的码点

let text = String.fromCodePoint(0x20BB7);
    
    for (let i = 0; i < text.length; i  ) {
      console.log(text[i]);
    }
    // " "
    // " "
    
    for (let i of text) {
      console.log(i);
    }
    // "?"

直接输入 u 2028 和 u 2029

'中' === '\u4e2d' // true

U 005C：反斜杠（reverse solidus)U 000D：回车（carriage return）U 2028：行分隔符（line separator）U 2029：段分隔符（paragraph separator）U 000A：换行符（line feed）

> 字符串里面不能直接包含反斜杠，一定要转义写成\\或者u005c

服务器输出的 JSON 被JSON.parse解析，就有可能直接报错
    const json = '"\u2028"';
    JSON.parse(json); // 可能报错

const PS = eval("'\u2029'");

# JSON.stringify() #

![file][]

JSON.stringify('\u{D834}') // "\u{D834}"

JSON.stringify('\u{D834}') // ""\\uD834""
    JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834""

模板字符串

$('#result').append(
      'There are <b>'   basket.count   '</b> '  
      'items in your basket, '  
      '<em>'   basket.onSale  
      '</em> are on sale!'
    );

ES6 引入了模板字符串

$('#result').append(`
      There are <b>${basket.count}</b> items
       in your basket, <em>${basket.onSale}</em>
      are on sale!
    `);

// 普通字符串
    `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}?`

let greeting = `\`Yo\` World!`;

$('#list').html(`
    <ul>
      <li>first</li>
      <li>second</li>
    </ul>
    `);

$('#list').html(`
    <ul>
      <li>first</li>
      <li>second</li>
    </ul>
    `.trim());

function authorize(user, action) {
      if (!user.hasPrivilege(action)) {
        throw new Error(
          // 传统写法为
          // 'User '
          //   user.name
          //   ' is not authorized to do '
          //   action
          //   '.'
          `User ${user.name} is not authorized to do ${action}.`);
      }
    }

function fn() {
      return "Hello World";
    }
    
    `foo ${fn()} bar`
    // foo Hello World bar

// 变量place没有声明
    let msg = `Hello, ${place}`;
    // 报错

![file][file 1]

const tmpl = addrs => `
      <table>
      ${addrs.map(addr => `
        <tr><td>${addr.first}</td></tr>
        <tr><td>${addr.last}</td></tr>
      `).join('')}
      </table>
    `;

const data = [
        { first: '<Jane>', last: 'Bond' },
        { first: 'Lars', last: '<Croft>' },
    ];
    
    console.log(tmpl(data));
    // <table>
    //
    //   <tr><td><Jane></td></tr>
    //   <tr><td>Bond</td></tr>
    //
    //   <tr><td>Lars</td></tr>
    //   <tr><td><Croft></td></tr>
    //
    // </table>

![file][file 2]![file][file 3]

let evalExpr = /<%=(. ?)%>/g;
    let expr = /<%([\s\S] ?)%>/g;
    
    template = template
      .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
      .replace(expr, '`); \n $1 \n  echo(`');
    
    template = 'echo(`'   template   '`);';

![file][file 4]

alert`123`
    // 等同于
    alert(123)

![file][file 5]

![file][file 6]

![file][file 7]

![file][file 8]

![file][file 9]

![file][file 10]

模板字符串默认会将字符串转义，导致无法嵌入其他语言。

function latex(strings) {
      // ...
    }
    
    let document = latex`
    \newcommand{\fun}{\textbf{Fun!}}  // 正常工作
    \newcommand{\unicode}{\textbf{Unicode!}} // 报错
    \newcommand{\xerxes}{\textbf{King!}} // 报错
    
    Breve over the h goes \u{h}ere // 报错
    `

学习来源作者：阮一峰

### https://es6.ruanyifeng.com/\#docs/string ###

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

###  ###

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达叔小生][Link 1]的简书！ ###

**这是一个有质量，有态度的博客**

![博客][20190902005826297.jpeg]

[file]: /images/20210724/bd0c1431606d424181790d485591b354.png
[file 1]: /images/20210724/d563f82c68244119944d653c93737b2f.png
[file 2]: https://img-blog.csdnimg.cn/20190902005823384.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx,size_16,color_FFFFFF,t_70
[file 3]: /images/20210724/6e032a9f14c148c19b75c74de8f082e1.png
[file 4]: /images/20210724/7b0edfd8a7824215ac4e13a2e1dcef28.png
[file 5]: /images/20210724/23542c30d2fd443a806a9a23b3f273ed.png
[file 6]: /images/20210724/5d8c76da795e4dd183113a2d6572a3b4.png
[file 7]: /images/20210724/919ba49cde02436189a83929d4ebe1d5.png
[file 8]: /images/20210724/73f2b3ae926c44108073446caf6835c0.png
[file 9]: /images/20210724/0f6e61bea76b42fca4db313e7c450367.png
[file 10]: /images/20210724/b03d67e539a14e26a8c88fea4b0485af.png
[Link 1]: https://www.jianshu.com/u/c785ece603d1
[20190902005826297.jpeg]: https://img-blog.csdnimg.cn/20190902005826297.jpeg