JavaScript字符串格式化详解：ES6模板字符串与自定义format方法

本文主要介绍了JavaScript中实现字符串格式化的两种常见方式：

1. 使用反引号实现（推荐）

ES6引入的模板字符串（Template String）是对传统字符串的增强，使用反引号（`）进行标识。它既可以作为普通字符串使用，也支持定义多行字符串，并能在字符串内部直接嵌入变量。

其语法结构如下：

`想要输出的字符串……${变量名称}想要输出的字符串……${变量名称}`

具体应用示例如下：

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

2. 通过自定义方法实现

String.prototype属性指向String的原型对象，所有String实例均继承自该原型。因此，对String.prototype的任何修改都会影响所有的String实例。通过扩展String.prototype的format方法，可以实现字符串拼接功能，其基础实现逻辑如下：

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;
};

调用该方法的示例代码如下：

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

以下是其他开发者补充的另一种实现思路：

格式化字符串

需要注意的是，使用普通的replace方法可能无法处理多个重复的占位符。

<!-- lang: js -->
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;
}

版本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 格式化参数值
 */
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.replaceAll("\\{" + key + "\\}", value);
		}
	}
	return result;
}

具体使用方法如下：

<!-- lang: js -->
//两种调用方式
var template1="我是{0}，今年{1}了";
var result1=template1.format("loogn",22);
var template2="我是{name}，今年{age}了";
var result2=template2.format({name:"loogn",age:22});
//两个结果都是"我是loogn，今年22了"

在版本2中，由于使用了正则表达式（通过replaceAll实现），当文本中包含多个替换位时，所有占位符均可被正确替换。例如：var template1="我是{0}，今年{1}了, lucy今年也{1}"; var

//输出结果为"我是loogn，今年22了, lucy今年也22了"

至此，关于JS格式化字符串的两种方法（反引号与String.prototype）的介绍已完成。如需了解更多相关内容，建议查阅本站过往文章或继续浏览后续章节，感谢大家的支持。

JS格式化字符串的两种方法：反引号与String.prototype

1. 使用反引号实现（推荐）

2. 通过自定义方法实现

实用工具推荐