ECMASCRIPT 6 实战之 模板字符串

模板字符串(templating string)在 ECMASCRIPT 6中是最为实用的技术之一,它的出现，巧妙地解决了我们对字符串处理的很多需求, 有了模板字符串, 对于字符串的处理会显得更加优雅从容.

字符串拼接

在模板字符串内做拼接操作, 更加符合直觉感受

  const getFormateDate = (seperate = '-') => {
    let date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
    return `${year}${seperate}${month}${seperate}${day}`;
  }
  getFormateDate() // "2019-6-5"

复制代码

拼接包含换行符(\n\t\r)类的 Html

在模板字符串内定义多行文本,保留原有格式

  const articleList = 
  `
    <ul>
      <li>
        <span>ECMASCRIPT 6 实战之 解构赋值</span>
        <p>相信解构赋值(Destructuring)自 ECMASCRIPT 6(以下简称 ES 6) 面世以来被大家快速地熟悉并运用到实际开发中了, 这是一种能有效减少代码量，使代码逻辑更简单优雅的技术, 下面我们就再来回顾、总结一下解构赋值的种种用法吧</p>
      </li>
      <li>
        <span>React Native 传参的五种方式</span>
        <p>在React Native 中由于业务的需要, 我们往往要在诸多的页面间，组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证，稳定好用的方式给大家</p>
      </li>
      <li>
        <span>Mobx, 化繁为简的艺术</span>
        <p>在开发中大型应用的时候,与 React 配合使用的数据状态管理库除了有 Redux, 我们还有了新选择 -- Mobx, Mobx 是一款提供函数响应式编程的数据状态管理库, 相比于 Redux 的复杂而沉重, 它有着更简单的接口与更少的概念, 只需较少的代码, 即可把数据有效管理起来.</p>
      </li>
    </ul>
  `
  在 `` 中定义的多行字符串会自动保留换行符 [\n\t\r], 这一特性非常 适合在 React 中的 JSX 语法或是 Vue 的 template 中使用
复制代码

自动进行表达式的运算

模板字符串内的表达式会自动运行

  例 1:
  let familyName = 'merga galaxy';
  const finalName = `${ familyName.toUpperCase() }` // "MERGA GALAXY"


  例 2:
  const formatMoney = money => {
    if(!money || money === '') return 0;
    return money.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
  }

  const calcResult = `${ formatMoney(1688168948) }`;
  calcResult // "1,688,168,948.00";

  例 3:
  const calcNumber = `${ 1087 + 169 }`;
  calcNumber // '1256'

  例 4:
  const isChecked = `${ Boolean(1) }`;
  isChecked // 'true'

  例 5:
  const family_name = 'judas';
  const user_name = `${ family_name === 'mega' ? 'galaxy' : 'judas' }`;
  user_name // 'judas'

复制代码

模板字符串非常容易理解和上手, 如果还在苦于字符串处理不够简洁优雅的话, 就赶紧用起来吧~~~

转载于:https://juejin.im/post/5cf6a05d518825095b332638