如何在JavaScript中实现类似Ruby的string interpolation字符串插值功能

你提到的Ruby插值是通过#{}占位符在双引号字符串中嵌入变量/表达式，在JavaScript中有以下几种实现方式：

1. 原生ES6+模板字符串（最推荐） #

ES2015(ES6)之后JavaScript原生支持模板字符串语法，和Ruby的插值逻辑几乎一致，仅占位符语法略有区别：

• 语法：用反引号 ` 包裹字符串，用 ${变量/表达式} 作为占位符
• 示例代码：

const name = "world";
console.log(`Hello, ${name}!`); // 输出 Hello, world!

• 额外特性：支持直接换行、嵌入任意表达式：

const a = 10;
const b = 20;
console.log(`a + b 的结果是 ${a + b}
换行也不需要额外加拼接符`);

2. ES5及更低版本兼容方案 #

如果需要兼容不支持ES6的老环境，可以用以下两种方式：

字符串拼接（简单场景用） #

直接用+拼接字符串和变量即可：

var name = "world";
console.log("Hello, " + name + "!");

自定义插值函数（匹配Ruby语法） #

如果想要完全对齐Ruby的#{}占位符写法，可以自己实现一个通用插值工具函数：

/**
 * 实现Ruby风格的字符串插值
 * @param {string} str 待插值的字符串，包含#{变量名}占位符
 * @param {object} params 变量键值对
 * @returns {string} 插值完成的字符串
 */
function interpolate(str, params) {
  return str.replace(/#\{(\w+)\}/g, function(match, key) {
    return params[key] !== undefined ? params[key] : match;
  });
}

// 调用示例
var name = "world";
console.log(interpolate("Hello, #{name}!", { name: name }));

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