{"componentChunkName":"component---src-templates-blog-post-js","path":"/reverse-string/","result":{"data":{"site":{"siteMetadata":{"title":"😏","author":"thoamsy"}},"markdownRemark":{"id":"1dfc503c-42a0-5e25-b7eb-85ee46306122","html":"<p>这个问题可能非常老，写过代码的都知道使用</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">str\n  <span class=\"token punctuation\">.</span><span class=\"token function\">split</span><span class=\"token punctuation\">(</span><span class=\"token string\">''</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">reverse</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">.</span><span class=\"token function\">join</span><span class=\"token punctuation\">(</span><span class=\"token string\">''</span><span class=\"token punctuation\">)</span></code></pre></div>\n<p>但是，需要注意的是，因为 JS 默认使用的是 UCS-2 来编码的，对于中文支持也貌似没问题。可是到了 Unicode 环境下，大量的 emoji，就会出问题咯。\n<span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 800px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/51b4d8cf4e13a6267e5cf72a02662488/ae694/A20289F2-4515-4E5E-9C91-1BF74DF84328.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 10.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'400\\'%20height=\\'41\\'%3e%3cpath%20d=\\'M0%2020v21h401V0H220A1280%201280%200%200033%202l-1-2-1%202c-1%202-3%203-5%200-2-1-5-2-14-2H0v20m140-9c-3%202-2%206%200%208%204%204%2010%201%2010-4s-7-8-10-4\\'%20fill=\\'%23d3d3d3\\'%20fill-rule=\\'evenodd\\'/%3e%3c/svg%3e'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n        <source\n          data-srcset=\"/static/51b4d8cf4e13a6267e5cf72a02662488/ba381/A20289F2-4515-4E5E-9C91-1BF74DF84328.webp 200w,\n/static/51b4d8cf4e13a6267e5cf72a02662488/7f61c/A20289F2-4515-4E5E-9C91-1BF74DF84328.webp 400w,\n/static/51b4d8cf4e13a6267e5cf72a02662488/d00b9/A20289F2-4515-4E5E-9C91-1BF74DF84328.webp 800w,\n/static/51b4d8cf4e13a6267e5cf72a02662488/10237/A20289F2-4515-4E5E-9C91-1BF74DF84328.webp 850w\"\n          sizes=\"(max-width: 800px) 100vw, 800px\"\n          type=\"image/webp\"\n        />\n        <source\n          srcset=\"/static/51b4d8cf4e13a6267e5cf72a02662488/772e8/A20289F2-4515-4E5E-9C91-1BF74DF84328.png 200w,\n/static/51b4d8cf4e13a6267e5cf72a02662488/e17e5/A20289F2-4515-4E5E-9C91-1BF74DF84328.png 400w,\n/static/51b4d8cf4e13a6267e5cf72a02662488/5a190/A20289F2-4515-4E5E-9C91-1BF74DF84328.png 800w,\n/static/51b4d8cf4e13a6267e5cf72a02662488/ae694/A20289F2-4515-4E5E-9C91-1BF74DF84328.png 850w\"\n          sizes=\"(max-width: 800px) 100vw, 800px\"\n          type=\"image/png\"\n        />\n        <img\n          class=\"gatsby-resp-image-image lazyload\"\n          data-src=\"/static/51b4d8cf4e13a6267e5cf72a02662488/5a190/A20289F2-4515-4E5E-9C91-1BF74DF84328.png\"\n          alt=\"A20289F2 4515 4E5E 9C91 1BF74DF84328\"\n          title=\"A20289F2 4515 4E5E 9C91 1BF74DF84328\"\n          loading=\"lazy\"\n          style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        />\n      </picture>\n  </a>\n    </span>\n就像上面显示的这样。那改怎么解决呢？在 ES6 之前，可能需要通过对 Unicode 内部编码的了解来特别规定某个范围改做什么。但是 ES6 支持了 <code class=\"language-text\">codePoint</code>，我们就不要这种复杂的方式了！\n<span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 800px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/d6f147eaaf32b6c07bc00e9b8b362ce8/9239a/3C5A8FC8-2D99-4F4E-907C-89276B8A33BF.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 12.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'400\\'%20height=\\'50\\'%3e%3cpath%20d=\\'M0%2015l1%2016v2l-1%209v8h7l8-1h5l191%201h190V0H250A4325%204325%200%200038%201c0-1-2-1-4%201h-8c-2-2-4-2-6%200h-7c-1-2-3-2-7-2H0v15\\'%20fill=\\'%23d3d3d3\\'%20fill-rule=\\'evenodd\\'/%3e%3c/svg%3e'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n        <source\n          data-srcset=\"/static/d6f147eaaf32b6c07bc00e9b8b362ce8/ba381/3C5A8FC8-2D99-4F4E-907C-89276B8A33BF.webp 200w,\n/static/d6f147eaaf32b6c07bc00e9b8b362ce8/7f61c/3C5A8FC8-2D99-4F4E-907C-89276B8A33BF.webp 400w,\n/static/d6f147eaaf32b6c07bc00e9b8b362ce8/d00b9/3C5A8FC8-2D99-4F4E-907C-89276B8A33BF.webp 800w,\n/static/d6f147eaaf32b6c07bc00e9b8b362ce8/92f8c/3C5A8FC8-2D99-4F4E-907C-89276B8A33BF.webp 1200w,\n/static/d6f147eaaf32b6c07bc00e9b8b362ce8/0d9bd/3C5A8FC8-2D99-4F4E-907C-89276B8A33BF.webp 1246w\"\n          sizes=\"(max-width: 800px) 100vw, 800px\"\n          type=\"image/webp\"\n        />\n        <source\n          srcset=\"/static/d6f147eaaf32b6c07bc00e9b8b362ce8/772e8/3C5A8FC8-2D99-4F4E-907C-89276B8A33BF.png 200w,\n/static/d6f147eaaf32b6c07bc00e9b8b362ce8/e17e5/3C5A8FC8-2D99-4F4E-907C-89276B8A33BF.png 400w,\n/static/d6f147eaaf32b6c07bc00e9b8b362ce8/5a190/3C5A8FC8-2D99-4F4E-907C-89276B8A33BF.png 800w,\n/static/d6f147eaaf32b6c07bc00e9b8b362ce8/c1b63/3C5A8FC8-2D99-4F4E-907C-89276B8A33BF.png 1200w,\n/static/d6f147eaaf32b6c07bc00e9b8b362ce8/9239a/3C5A8FC8-2D99-4F4E-907C-89276B8A33BF.png 1246w\"\n          sizes=\"(max-width: 800px) 100vw, 800px\"\n          type=\"image/png\"\n        />\n        <img\n          class=\"gatsby-resp-image-image lazyload\"\n          data-src=\"/static/d6f147eaaf32b6c07bc00e9b8b362ce8/5a190/3C5A8FC8-2D99-4F4E-907C-89276B8A33BF.png\"\n          alt=\"3C5A8FC8 2D99 4F4E 907C 89276B8A33BF\"\n          title=\"3C5A8FC8 2D99 4F4E 907C 89276B8A33BF\"\n          loading=\"lazy\"\n          style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        />\n      </picture>\n  </a>\n    </span></p>\n<p>简单粗暴。</p>","frontmatter":{"title":"反转字符串","spoiler":null,"image":null,"date":"2018/01/12"}}},"pageContext":{"slug":"/reverse-string/","previous":{"fields":{"slug":"/parcel/Parcel 📦 和 React ⚛️ 的使用/"},"frontmatter":{"title":"Parcel 📦 和 React ⚛️ 的使用","image":null,"spoiler":"你也用 parcel?"}},"next":{"fields":{"slug":"/react-component-and-element/"},"frontmatter":{"title":"Element 和 Component 的区别","image":null,"spoiler":"一个判断是否是 React 新手的概念"}}}}}