js拼接字符串

hangzhoujava

浏览: 19366 次
性别:
来自: 杭州

最近访客更多访客>>

你是最好的

djyotm

zhoufh

xialinux

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

当要做组件的时候就会碰到html代码拼装,既然要做组件就不能依赖于HTML中获取HTML代码
但是var templateHTML = '<div>......</div>';
当里面的html代码很复杂的时候就是个麻烦事儿
代码一行很长很长，而且修改起来也很不方便
这个问题的解决方法可以这样

var outhtml = '\
<div>\
    <table>\
	{{#rows}}\
            <tr>\
               <td>\  
                   {{id}}\
               </td>\
               <td>\ 
                   {{name}}\
               </td>\
            </tr>\
	{{/rows}}\
    </table>\
</div>';

这样写的话就让可读性增强，修改模板代码也简答起来

注意\ 后面不要带空格

这种方式比传统的join或者 + 方便了好多

下面用一种更加方便的方式处理

TEMPLATE = { 
	m1:function() {
		/*
		{{#obj}}
			 我是m1的模板内容
		{{/obj}}
		*/
	},m2:function() {
		/*
		{{#obj}}
			我是m2的模板内容
		{{/obj}}
		*/
	}
}
function baseCode(func) {
  return  func.toString().split(/\n/).slice(2, -2).join('\n');
}
console.log(baseCode(TEMPLATE.m1));
console.log(baseCode(TEMPLATE.m2));

既然是以换行做为分割，那么函数就不能乱写

function(){ //是一行

} //是一行

注意哦

这三种方法里面最后一种最优美，但是局限于换行，用正则处理一下(参考github)

var multiline = function(func){  
   var regexpComment = /\/\*([\s\S]*?)\*\//;  
   return regexpComment.exec(func.toString())[1];  
 }

console里面执行

multiline(function(){/*<!DOCTYPE html><html><head><title>阿桑的发生地方</title></head><body><h1>Hello 啊时代发生的发生的发生地方阿什顿飞温柔</h1></body></html>*/});

无论是还是不换行都搞定了

ES6 提供了一种新的语法，不用函数处理也可以。

var str = `es6的模板字符串是怎样的?麻烦写个例子吧..._慕课猿问
2017年5月3日 - es6的模板字符串是怎样的?麻烦写个例子吧分享即可 +1积分 0 提问者 慕虎8156221 由此问题已获得 +1积分 添加回答 回答 1回答2017-05-03 西兰花伟大炮 ...
www.imooc.com/wenda/de...  - 百度快照 - 170条评价`;
console.info(str);