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'

複製代碼

模板字符串很是容易理解和上手, 若是還在苦於字符串處理不夠簡潔優雅的話, 就趕忙用起來吧~~~