JS格式化字符串的兩種方法(反引號與String.prototype)

更新時間：2023年06月19日 12:36:30 作者：COCO56（徐可可）

本文一共介紹了兩種實現(xiàn)方式,使用反引號或自定義方法實現(xiàn),需要的朋友可以參考下

本文一共介紹了兩種實現(xiàn)方式：

1. 使用反引號實現(xiàn)（推薦）

ES6 模板字符串(Template String)是增強版的字符串，用反引號(`)標識，它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

語法格式：

`想要輸出的字符串……${變量名稱}想要輸出的字符串……${變量名稱}`

應(yīng)用實例：

 <script>
        window.onload = function() {
            var name = "徐可可";
            var age = 25;
            var sex = "男";
            console.log(`大家好，我叫${name}，性別${sex},今年${age}歲了`);
        }
 </script>

2. 自定義方法實現(xiàn)

String.prototype 屬性表示 String原型對象。所有 String 的實例都繼承自 String.prototype. 任何String.prototype上的改變都會影響到所有的 String 實例。js擴展String.prototype.format字符串拼接的功能，首先是基礎(chǔ)功能的改造：

String.prototype.format = function(){
  if(arguments.length==0){
    return this;
  }
  for(var s=this, i=0; i<arguments.length; i++){
    s = s.replace(new RegExp("\\{"+i+"\\}","g"), arguments[i]);
  }
  return s;
};

然后就是調(diào)用了：

//方式1
var test = '我的{0}是{1}';
var result = test.format('ID','coco56');
//方式2
var test = '我的{description}是{name}';
var result = test.format({description:'ID',name:'coco56'});

下面是其它網(wǎng)友的補充

格式化字符串

使用的replace不適合多個重復

<!-- lang: js -->
String.prototype.format = function(args) {
    var result = this;
    if (arguments.length < 1) {
        return result;
    }
    var data = arguments;		//如果模板參數(shù)是數(shù)組
    if (arguments.length == 1 && typeof (args) == "object") {
        //如果模板參數(shù)是對象
        data = args;
    }
    for (var key in data) {
        var value = data[key];
        if (undefined != value) {
            result = result.replace("{" + key + "}", value);
        }
}
    return result;
}

版本2 使用了replaceAll

<!-- lang: js -->
/**
 * 替換所有匹配exp的字符串為指定字符串
 * @param exp 被替換部分的正則
 * @param newStr 替換成的字符串
 */
String.prototype.replaceAll = function (exp, newStr) {
	return this.replace(new RegExp(exp, "gm"), newStr);
};
/**
 * 原型：字符串格式化
 * @param args 格式化參數(shù)值
 */
String.prototype.format = function(args) {
	var result = this;
	if (arguments.length < 1) {
		return result;
	}
	var data = arguments; // 如果模板參數(shù)是數(shù)組
	if (arguments.length == 1 && typeof (args) == "object") {
		// 如果模板參數(shù)是對象
		data = args;
	}
	for ( var key in data) {
		var value = data[key];
		if (undefined != value) {
			result = result.replaceAll("\\{" + key + "\\}", value);
		}
	}
	return result;
}

使用方法：

<!-- lang: js -->
//兩種調(diào)用方式
var template1="我是{0}，今年{1}了";
var result1=template1.format("loogn",22);
var template2="我是{name}，今年{age}了";
var result2=template2.format({name:"loogn",age:22});
//兩個結(jié)果都是"我是loogn，今年22了"

對于版本2使用了正則表達式(replaceaAll)，意味著當文本中出現(xiàn)多個替換位時，都可以被替換。 var template1=“我是{0}，今年{1}了, lucy今年也{1}了”; var