从代码的可维护性可读性学习模板字符串

Posted 2022-10-29 sefaultment

string

字符串的概念早就深入我们的思维，因为日常我们接触的最多的就是文本，所以对字符串特别熟悉，一看到需要的是字符串，我们就能联想到字符串这个类型去存储它。

字符串用途

暂时想到就是，用于存储字符，这个太常见了，等以后有了新的理解再展开。

字符串的理解

字符串通常提供了索引访问方式，比如charAt(i),但是其内部是不是数组不好说，但是字符串本身是不可变的，每次修改都会返回新的字符串。

字符串检测

typeof v = "string"

字符串定义方式

在很长一段时间，js定义字符串只有""这种方式

str = "something"

但是，我们更多的常见，是需要动态拼接字符串，而这种方式，带来了许多问题,了解过java的同学可能都知道，字符串是不可变的，使用 + 号连接字符串，不是在原先的字符串上操作，而是产生了一个新的字符串，这有两个问题

str = "fun(" + args + ")"  

上面是一个简单的例子，但是其已经展示了+号拼接字符串带来的噪音，可以看到使用+，无论在阅读或者修改时，都需要关心+号拼接导致的多子段字符串带来的""影响，尤其在更复杂的拼接情况下，带来的噪音更加大，几乎导致维护困难

不如让解释器帮我们拼接

+号是刚开始解释器与我们的一个约定，而且在js中，+号的规则还有点小复杂，我们能重新与解释器约定新的语法吗，移除这种+号和""带来的代码可读性的降低

str = `fun( $args  )`
str  = fun(args)

通过新的语法，我们移除了拼接的+和多余的""，使得嵌入的字符串变量尤为清晰，新的语法好处不止如此，记得我们上面说的+号导致的多次创建临时变量问题，也得以解决，解释器在解释模板字符串时，会将整个模板交给解释器默认的解析函数，将里面的变量解析后得到一个字符串，没有多次创建临时字符串的问题，性能非常之高，附上专业的性能测试数据，模板字符串比普通拼接快83%,可以预见，越复杂的字符串场景，收益越大

模板字符串另一好处----- 减少转义

template = "<div class=''></div> " +
            "<div class=''></div> "

虽然现在脚手架都普及到随便找个教程都能起飞了，但是总会使用到使用Vue.component注册组件的情况，emmm，这时候使用老的+号，拼接，导致每行都需要""作为包装，而因为""的包裹，DOM的双引号属性都需要进行转义，有""和转义的干扰，导致这个模板看起来极度恶心，一不小心就会Vue告诉你没有闭合标签，还要找半天，这都是+号拼接引起的问题。

template = `<div class=''></div>  
            <div class=''></div> `

改用模板字符串后，多余的""和转义都不见了，就像在写.vue一样模板很清晰，很舒服，就是少了个高亮，哪天有人写个这种特殊场景的高亮，就更舒服了

总结

模板字符串的出现，使用字符串的可读性、可维护性大大提高，建议无脑直接使用，避免后期由于字符串扩展导致需要变更定义方式，当然，这边笔者也会大量使用，如果有其他坑，会及时更新。