简单的字符串模板

每次在写脚本的时候拼装字符串是个头痛的事情,主要是双引号,单引号,还有一堆变量,一不小心就搞错了,而且可读性非常差。这里推荐一个小工具:http://www.html-js.com/my-js/version0.0.1/tool/html2string.html?这个工具可以将复杂的字符串转换成js的字符串。至少解决的了手动拼装的的问题,但是变量的话还是非常难受。比如一个列表:

  • 《》 – 熊天平
  • 《富士山下》 -?陈奕迅
  • 《假如》 – 信乐团
通常如果是异步的请求,后端一般返回回来的是一个json:

[code=”javascript”]
[
{“song”:””,”songurl”:”https://www.css88.com/mp3/1.html”,”songer”:”熊天平”,”songerurl”:”https://www.css88.com/songer/1.html”},
{“song”:”富士山下”,”songurl”:”https://www.css88.com/mp3/2.html”,”songer”:”陈奕迅”,”songerurl”:”https://www.css88.com/songer/2.html”},
{“song”:”假如”,”songurl”:”https://www.css88.com/mp3/3.html”,”songer”:”信乐团”,”songerurl”:”https://www.css88.com/songer/3.html”}
]
[/code]
通常情况下会这样拼装:
[code=”javascript”]
var listData=[
{“song”:””,”songurl”:”https://www.css88.com/mp3/1.html”,”songer”:”熊天平”,”songerurl”:”https://www.css88.com/songer/1.html”},
{“song”:”富士山下”,”songurl”:”https://www.css88.com/mp3/2.html”,”songer”:”陈奕迅”,”songerurl”:”https://www.css88.com/songer/2.html”},
{“song”:”假如”,”songurl”:”https://www.css88.com/mp3/3.html”,”songer”:”信乐团”,”songerurl”:”https://www.css88.com/songer/3.html”}
];
var listHtml=”


    for(var i=0,lengths = listData.length;i < lengths;i++){ listHtml+='
  • 《’+listData[i].song+’》 – ‘+listData[i].songer+’
    }
    listHtml+=”


console.log(listHtml);
[/code]

如果给歌曲歌手加链接更加复杂。群里有人可以引入模板概念,这样至少结构上可以清晰,可读性会增强.
写了一段脚本:
[code=”javascript”]
String.prototype.formatTemp = function(temp){
var str=this;
for(var k in temp){
var regObj = new RegExp(“{“+k+”}”,”g”);
str = str.replace(regObj,temp[k]);
}
return str;
};
[/code]
这样可以将上面的脚本改写成:
[code=”javascript”]
var listData=[
{“song”:””,”songurl”:”https://www.css88.com/mp3/1.html”,”songer”:”熊天平”,”songerurl”:”https://www.css88.com/songer/1.html”},
{“song”:”富士山下”,”songurl”:”https://www.css88.com/mp3/2.html”,”songer”:”陈奕迅”,”songerurl”:”https://www.css88.com/songer/2.html”},
{“song”:”假如”,”songurl”:”https://www.css88.com/mp3/3.html”,”songer”:”信乐团”,”songerurl”:”https://www.css88.com/songer/3.html”}
];
var listHtml=”

    “,
    temp=’

  • 《{song}》 – {songer}

  • for(var i=0,lengths = listData.length;i < lengths;i++){ listHtml+=temp.formatTemp(listData[i]); } listHtml+="


console.log(listHtml);
[/code]
当然可以用数组拼装:
[code=”javascript”]
var listData=[
{“song”:””,”songurl”:”https://www.css88.com/mp3/1.html”,”songer”:”熊天平”,”songerurl”:”https://www.css88.com/songer/1.html”},
{“song”:”富士山下”,”songurl”:”https://www.css88.com/mp3/2.html”,”songer”:”陈奕迅”,”songerurl”:”https://www.css88.com/songer/2.html”},
{“song”:”假如”,”songurl”:”https://www.css88.com/mp3/3.html”,”songer”:”信乐团”,”songerurl”:”https://www.css88.com/songer/3.html”}
];
var listHtml=”

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 简单的字符串模板

评论 9

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    真神奇,我也写过这样一段一模一样的代码。

    Feather7年前 (2011-12-03)回复
  2. #-48

    JS模板的概念越来越重要

    manson7年前 (2011-12-03)回复
  3. #-47

    这种模板方式效率很低, 如果json对象属性很多, 替换一次就非得所有属性遍历一次, 而且for in的效率也是低, 所以最好思路应该是遍历模板字符串, 找到需要替换的标记, 再逐个替换

    我是哈利7年前 (2011-12-05)回复
  4. #-46

    在原型链里加formatTemp, 这样每个字符串都会有formatTemp这个方法。建议最好分开
    String. formatTemp = function(str,model){
    for(var k in model){
    var re = new RegExp(“{“+k+”}”,”g”);
    str = str.replace(re,model[k]);
    }
    return str;
    }

    这样去用:
    String.formatTemp(temp, listData[i]);

    阿甘7年前 (2011-12-05)回复
  5. #-45

    思想非常值得借鉴

    hemingwang09027年前 (2011-12-05)回复
  6. #-44

    我一直用的jquery.tmpl插件实现这类插入的,感觉挺不错。

    小77年前 (2011-12-05)回复
  7. #-43

    数据模版的方式的确更便于开发,性能上倒是没研究过

    zebo7年前 (2011-12-05)回复
  8. #-42

    用数组方式拼装的效率最高,网路上有相关的文章

    Jeremy7年前 (2011-12-15)回复
  9. #-41

    songer …

    shadyduan7年前 (2011-12-30)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏