使用CSSStyleDeclaration.setProperty()时，如何阻止Chrome将手机号转为指数形式？

这个问题其实是Chrome和Firefox对CSS自定义属性（变量）的解析规则差异导致的。Chrome的CSS引擎会把开头带+的部分识别为数值类型，进而对后面的大数字做科学计数法转换，而Firefox则是将整个值当作字符串保留，这就是两边输出不一致的核心原因。

问题复现代码 #

document.documentElement.style.setProperty("--phone", "+49 7761 9935370")
const result = document.documentElement.style.getPropertyValue("--phone")
console.log(result)
// Chrome输出: "49 7761 9.93537e+6"
// Firefox输出: "+49 7761 9935370"

解决方案：强制将值识别为字符串 #

要让Chrome把这个值当作纯字符串存储，最简单的办法就是给值加上双引号（单引号也可以），这样CSS解析器就不会把它当作数值处理了：

// 设置时给内容包裹引号
document.documentElement.style.setProperty("--phone", '" +49 7761 9935370 "')
// 获取时去除首尾的引号和多余空格
const result = document.documentElement.style.getPropertyValue("--phone").trim().slice(1, -1)
console.log(result)
// 现在Chrome和Firefox都会输出预期结果: "+49 7761 9935370"

另外，也可以利用CSS的string()函数（支持Chrome 111+、Firefox 115+）来显式声明字符串类型，但兼容性稍差：

document.documentElement.style.setProperty("--phone", "string(+49 7761 9935370)")
const result = document.documentElement.style.getPropertyValue("--phone")
// 输出会包含string()包裹，需要额外处理提取内部内容

综合来看，加引号的方式兼容性覆盖更广，处理逻辑也更简单，是更稳妥的选择。

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