js格式化字符串方法：String.prototype.format

最近在做的项目总是要拼接html到页面，
写了很多，诸如此类代码：

for (var j = 0; j < data.length; j++){
		n = j + 1;
		tempHtml += "<li class='mui-table-view-cell mui-collapse'>"
		+"<a style='border-bottom: 1px solid #c8c7cc;'>"
		+"<p>"
		+"数量："
		+ data[j].count
		+ "</p>"
		+"<p>"
		+"面积："
		+ data[j].area
		+ "</p>"
		+"</div>"
		+"<li>"
		}
	}
	jQuery("#hiddenul").html(tempHtml)
});

有些还需要增加button点击事件传值，需要使用反斜杠转义字符串，弄得很头疼，比如

 '<button " onclick="delete(\'' + id + \'');">删除</button>';

刚开始只有一个人这样做，后来其他同事全部都这样做，为了尽快完成任务，我也这样做了，后来越来越多这类代码。实在看不下去了，于是想到能不能像java那样使用String.format()格式化字符串呢？于是去搜索，发现真的有。

主要有下面这两种方式:

方式一：

// 字符串格式化方法
String.prototype.format = function(args) {
	var result = this;
	if (arguments.length > 0) {
		if (arguments.length == 1 && typeof (args) == "object") {
			for (var key in args) {
				if(args[key]!=undefined){
					var reg = new RegExp("({" + key + "})", "g");
					result = result.replace(reg, args[key]);
				}
			}
		}
		else {
			for (var i = 0; i < arguments.length; i++) {
				if (arguments[i] != undefined) {
					var reg= new RegExp("({)" + i + "(})", "g");
					result = result.replace(reg, arguments[i]);
				}
			}
		}
	}
	return result;
};

使用方式：

var tempHtml = '' +
'<div>姓名：<div><span>{name}</span>' +
'<div>年龄：<div><span>{age}</span>'
var jsonObj = {
	'name':'张三'，
	'age': 20
}
let html = tempHtml.format(jsonObj);

那么这样就方便很多了，在遍历的时候使用

var tempHtml = '' +
'<div>姓名：<div><span>{name}</span>' +
'<div>年龄：<div><span>{age}</span>'
var jsonObj = [{
	'name':'李四'，
	'age': 20
},{
	'name':'张三'，
	'age': 21
}]
for(let i = 0; i < jsonObj.length; i++){
	$("#divId").append(tempHtml.format(jsonObj[i]))
}

这种方式我比较喜欢，参数设置值时比较直观

方式二

String.prototype.format = function(args) {
    var result = this;
    if (arguments.length < 1) {
        return result;
    }
 
    var data = arguments;       //如果模板参数是数组
    if (arguments.length == 1 && typeof (args) == "object") {
        //如果模板参数是对象
        data = args;
    }
    for (var key in data) {
        var value = data[key];
        if (undefined != value) {
            result = result.replace("{" + key + "}", value);
        }
	}
    return result;
}

使用方法：此种方式比较适合参数较少时使用

var tempStr="我是{0}，今年{1}了";
var str= tempStr.format('张三',20);

参考文章：https://www.cnblogs.com/yelaiju/archive/2012/03/27/2419212.html