{"componentChunkName":"component---src-templates-blog-small-jsx","path":"/blog/js_template/","result":{"data":{"markdownRemark":{"html":"<h1>深入字符串模板</h1>\n<h2>字符串模板</h2>\n<ul>\n<li><code>ES5</code>之前我们连接字符串与变量还需要使用js的<code>+</code>运算符进行连接</li>\n<li><code>ES6</code>中我们新增了<code>字符串模板</code>这个概念，<code>字符串模板</code>使用`作为定界符</li>\n<li>大家对他的认识可能只停留在<code>拼接字符串与变量</code>并在调用的地方进行<code>变量解析</code></li>\n<li>其实<code>字符串模板</code>有很多我们还不熟知的强大功能</li>\n</ul>\n<!--more-->\n<h1>常用形式</h1>\n<h2>插入表达式</h2>\n<pre><code class=\"language-js\">  function upper(s) {\n    return s.toUpperCase()\n  }\n  var who = 'reader'\n\n  // 使用字符串模板\n  var text = \n  `A very ${upper('warm')} welcome\n  to all of you ${upper(`${who}s`)}!\n  `\n  console.log(text) \n  // A very WARM welcome\n  // to all of you READERS!\n\n\n  // 使用ES5之前\n   var text = \"A very \" + upper('warm') + \" welcome \\r\\n to all of you \" + upper(who + \"s\")\n  console.log(text) \n</code></pre>\n<ul>\n<li>上面是我们想要实现的字符串片段部分单词转大写需求，可以看出字符串模板帮我们进行了<code>字符串的解析与换行符的保留</code></li>\n<li>传统的js则需要我们自己对<code>js表达式</code>进行拼接</li>\n</ul>\n<h1>高级用法</h1>\n<h2>标签模板字面量</h2>\n<ul>\n<li>其实在<code>你不知道的JavaScript</code>中将<code>字符串模板</code>称为<code>标签字符串字面量</code></li>\n<li>看一下下面比较酷炫的用法</li>\n</ul>\n<pre><code class=\"language-js\">  function foo(strings, ...values){\n    console.log(strings)\n    console.log(values)\n  }\n\n  var desc = 'awesome'\n  foo`Everything is ${desc}!`\n  // strings [ 'Everything is ', '!' ]   \n  // values  [ 'awesome' ]\n</code></pre>\n<ul>\n<li>看到这里可能都有点懵，这还是函数吗？又没有函数调用的小括号</li>\n<li>本质上说这是一类不需要<code>()</code>的函数调用，<code>字符串字面量</code>之前是一个要调用的函数</li>\n<li>那二者组合的<code>字符串字面量作为标签调用的函数</code>会变成什么？参数又是什么含义？</li>\n<li>第一个参数<code>strings</code>，由所有普通字符串组成的数组，在这里即为： <code>'Everything is '</code>跟 <code>'!'</code></li>\n<li>第二个参数<code>values</code>则是使用了<code>...gather/rest</code>运算符将其他的所有参数收集到了名为<code>values</code>的数组中，所以这里只能是<code>'awesome'</code></li>\n</ul>\n<h2>数字格式化为美元表示</h2>\n<pre><code class=\"language-js\">  function dollabillsyall(strings, ...values) {\n    return strings.reduce(function (s, v, idx){\n      if (idx > 0) {\n        if(typeof values[idx - 1] == 'number') {\n          s += `$${values[idx - 1].toFixed(2)}`\n        } else {\n          s += values[idx - 1]\n        }\n      }\n      return s + v\n    }, \"\")\n  }\n\n  var amt1 = 11.99, amt2 = amt1 * 1.88, name=\"Kyle\"\n  var text = dollabillsyall\n  `Thanks for your purchase, ${name}! your product cost was ${amt1}, which with tax comes out to ${amt2}.`\n  console.log(text)\n  // Thanks for your purchase, Kyle! your product cost was $11.99, which with tax comes out to $22.54.\n</code></pre>\n<ul>\n<li>这里我们使用<code>reduce</code>进行字符串拼接，对每一个数字变量都进行美元符拼接并转化为两位小数保留</li>\n</ul>","frontmatter":{"title":"ES2016字符串模板","date":"2019-03-11","tags":["JavaScript","ES2015","进修"],"categories":"JavaScript"},"fields":{"slug":"/js_template/"}}},"pageContext":{"slug":"/js_template/"}},"staticQueryHashes":["2566592090"]}