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

坚强是说给别人听的谎言 提交于 2019-11-29 13:12:44

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一样模板很清晰,很舒服,就是少了个高亮,哪天有人写个这种特殊场景的高亮,就更舒服了

总结

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!