如何将wp_localize_script()传入JS的字符串转为可调用变量？

你遇到的问题核心是后端传入的拼接规则是纯字符串，JS默认不会解析字符串内的变量和运算逻辑，只会直接拼接字符串本身。可通过以下两种方案解决：

解决方案 #

方案1（优先推荐，无安全风险） #

不要直接传递拼接表达式，调整后台自定义字段的填写规则，改为填写逗号分隔的变量名，示例：colorVariation,btnVariation。
前端将变量统一存入映射对象，遍历变量名列表取值拼接即可：

// 把所有要参与拼接的变量存入映射对象
const variationMap = {
  colorVariation: '_red',
  btnVariation: '_male'
}
// 拆分后端传入的变量名字符串
const orderFields = script_vars.order.split(',');
// 遍历取值拼接后缀
const variationSuffix = orderFields.map(field => variationMap[field]).join('');
const varId = `.variation${variationSuffix}`;

该方案完全规避了代码注入风险，无需执行动态代码，适配性更强。

方案2（保留表达式写法，需注意安全） #

如果必须保留后台填写表达式的逻辑，可以用new Function动态执行传入的表达式。注意：该方案存在代码注入风险，请确保该自定义字段仅允许可信的管理员用户编辑，禁止开放给普通用户修改。
示例代码：

var colorVariation = '_red';
var btnVariation = '_male';        
var order = script_vars.order;

// 动态执行表达式获取拼接结果
var variationSuffix = new Function('colorVariation', 'btnVariation', `return ${order}`)(colorVariation, btnVariation);
var varId = '.variation' + variationSuffix;

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