如何在jQuery中实现类似C# string.format的多变量字符串拼接？

嘿，我懂你这种反复调用replace的繁琐感！其实jQuery本身并没有内置和C# string.format完全一样的方法，但我们有好几种简单的方式来实现同样的便捷效果，甚至比你原来的写法更清爽：

方案1：自己实现一个String的format扩展方法 #

这是最贴近C#使用习惯的方式，我们给原生的String对象加一个扩展方法，以后所有字符串都能直接用：

// 给String原型添加format方法
String.prototype.format = function() {
  const args = arguments;
  // 用正则匹配所有{数字}格式的占位符，替换成对应参数
  return this.replace(/{(\d+)}/g, (match, index) => {
    return args[index] !== undefined ? args[index] : match;
  });
};

// 调用方式和C#几乎一模一样！
const AllString = "apple:{0},pear:{1},banana:{2}";
const apple = 0;
const pear = 1;
const banana = 2;
const NewString = AllString.format(apple, pear, banana);
console.log(NewString); // 输出 "apple:0,pear:1,banana:2"

这个方法还会处理参数缺失的情况——如果某个占位符没有对应的参数，会保留原占位符，不会出错。

方案2：用ES6模板字符串（推荐） #

如果你项目支持ES6及以上语法，这绝对是最简洁的写法，完全不需要额外函数，直接用反引号包裹字符串，变量用${变量名}插入：

const apple = 0;
const pear = 1;
const banana = 2;
const NewString = `apple:${apple},pear:${pear},banana:${banana}`;
console.log(NewString);

这种写法可读性拉满，写起来也比占位符更直观，现在主流浏览器都支持ES6，非常推荐用这个。

方案3：扩展成jQuery工具方法 #

如果你习惯jQuery的调用风格，也可以把格式化方法加到jQuery的工具函数里：

// 给jQuery添加format工具方法
$.format = function(str, ...args) {
  return str.replace(/{(\d+)}/g, (match, index) => {
    return args[index] !== undefined ? args[index] : match;
  });
};

// 调用方式
const AllString = "apple:{0},pear:{1},banana:{2}";
const NewString = $.format(AllString, apple, pear, banana);

简单总结一下：jQuery本身没带这个功能，但自己实现或者用ES6模板字符串都能轻松解决，后者更是现在的主流方案哦～

内容的提问来源于stack exchange，提问作者Melon NG