jQuery中为拼接字符串添加00前缀不生效的最优解决方法是什么？

失效的最常见原因是你绑定inputPhoneNumber的<input>元素设置了type="number"，数值类型的输入框会被浏览器自动抹除前导零，所以你拼接的00不会正常显示。

最优解决步骤 #

1. 优先调整输入框类型
   如果你的输入框需要保留前导零展示，直接把input的type属性改为text，原来的拼接写法就能直接生效：

// 原写法直接可用
inputPhoneNumber.val('00' + inputPhoneCountry + inputPhoneMain);
// 也可以用可读性更高的ES6模板字符串写法
inputPhoneNumber.val(`00${inputPhoneCountry}${inputPhoneMain}`);

如果担心变量类型问题导致拼接异常，可以主动把变量转成字符串再拼接：

inputPhoneNumber.val('00' + String(inputPhoneCountry) + String(inputPhoneMain));

2. 必须保留type="number"的场景
   如果业务要求必须用数值类型输入框，就把前导零存在自定义属性中，提交数据的时候再拼接：

// 赋值时存储前缀
inputPhoneNumber.val(inputPhoneCountry + inputPhoneMain).attr('data-phone-prefix', '00');
// 提交时取完整号码
const fullPhoneNumber = inputPhoneNumber.attr('data-phone-prefix') + inputPhoneNumber.val();

排查验证方法 #

你可以在赋值前打印拼接结果确认问题根源：

const fullVal = '00' + inputPhoneCountry + inputPhoneMain;
console.log(fullVal); // 输出结果正确的话，就可以确定是输入框type属性导致的问题
inputPhoneNumber.val(fullVal);

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