zoukankan      html  css  js  c++  java
  • 从代码的可维护性、可读性学习模板字符串

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

    总结

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

  • 相关阅读:
    如何修炼成某一领域的高手?
    宝宝为什么见生人就哭
    绩效管理
    《管理3.0》读书笔记
    卡特尔16PF性格测试与答案
    管理3.0
    偶感
    Javascript事件总结
    HTML5中与页面显示相关的API
    毕业了五年了--- 人生感想
  • 原文地址:https://www.cnblogs.com/sefaultment/p/11518275.html
Copyright © 2011-2022 走看看