本文深入探讨了在JavaScript中动态设置css自定义属性（CSS变量）时，如何正确处理属性名中包含JavaScript变量的字符串拼接问题。通过分析常见错误，阐明了JavaScript变量在字符串字面量中的正确求值方式，并提供了使用setProperty方法进行动态赋值的正确语法和示例，旨在帮助开发者避免因字符串拼接不当导致的预期外行为。
问题背景：动态CSS变量命名的挑战
在前端开发中，我们经常需要根据业务逻辑动态地调整元素的样式。css自定义属性（通常称为css变量）为这种动态性提供了极大的便利。然而，当尝试使用javascript变量来构建css自定义属性的名称时，开发者可能会遇到字符串拼接不当导致的问题。
考虑以下场景，我们希望动态地创建一系列名为–services-box-delay-X的CSS自定义属性，其中X是一个JavaScript变量i的值，并且其值也由另一个JavaScript变量totalServicesLines决定：
// 假设 root 是一个有效的DOM元素，如 document.documentElement // 假设 i 和 totalServicesLines 是 JavaScript 变量 // 错误的拼接尝试 root.style.setProperty('--services-box-delay-"+ i +"', totalServicesLines + "s");
这段代码看似合理，但它无法按预期工作。其根本原因在于JavaScript的字符串拼接机制。在上述代码中，”–services-box-delay-“+ i +”‘ 这部分字符串的拼接结果并不是我们期望的–services-box-delay-1（如果i为1），而是–services-box-delay-“i”。这意味着JavaScript变量i并没有被求值并嵌入到字符串中，而是被当作了字符串字面量的一部分。因此，最终设置的CSS自定义属性名将是字面量的–services-box-delay-“i”，而非动态的–services-box-delay-1。
核心解决方案：正确的JavaScript字符串拼接
要解决这个问题，关键在于正确地将JavaScript变量的值嵌入到字符串中。在JavaScript中，当使用加号（+）进行字符串拼接时，变量需要独立于字符串字面量，以便其值能够被正确地求值。
正确的拼接方式应该是将变量i完全置于字符串引号之外，通过+操作符与前后字符串进行连接：
// 正确的拼接方式 root.style.setProperty('--services-box-delay-' + i, totalServicesLines + 's');
或者，如果属性名中包含复杂的字符串和变量组合，为了清晰起见，可以在变量两侧加上引号，但这并不是强制的，且可能引起误解（如原问题中的错误尝试）。更清晰的写法是：
// 另一种正确的拼接方式，但可能不如直接连接简洁 root.style.setProperty('--services-box-delay-"' + i + '"', totalServicesLines + 's');
请注意，第二种写法中的”是字符串字面量的一部分，它会出现在最终的CSS变量名中，例如–services-box-delay-“1″。通常情况下，我们希望CSS变量名是–services-box-delay-1，因此第一种写法更为常用和推荐。
示例解析：从错误到正确
让我们通过一个具体的例子来对比两种拼接方式的效果。 假设：
- i = 1
- totalServicesLines = 3
1. 错误的拼接方式 (`–services-box-delay-“+ i +”‘)
root.style.setProperty('--services-box-delay-"+ i +"', totalServicesLines + "s");
在执行时，”–services-box-delay-“+ i +” 会被解析为： “–services-box-delay-” + String(i) + “” 即 “–services-box-delay-” + “1” + “” 最终结果是字符串 –services-box-delay-“1″。 因此，这段代码将尝试设置一个名为–services-box-delay-“1″的CSS自定义属性，其值为”3s”。
2. 正确的拼接方式 (`–services-box-delay-‘ + i)
root.style.setProperty('--services-box-delay-' + i, totalServicesLines + 's');
在执行时，’–services-box-delay-‘ + i 会被解析为： ‘–services-box-delay-‘ + String(i) 即 ‘–services-box-delay-‘ + “1” 最终结果是字符串 –services-box-delay-1。 因此，这段代码将正确地设置一个名为–services-box-delay-1的CSS自定义属性，其值为”3s”。这正是我们期望的结果。
替代方案：es6模板字面量
对于涉及多个变量的复杂字符串拼接，ES6引入的模板字面量（Template Literals）提供了一种更简洁、更具可读性的解决方案。模板字面量使用反引号（“）定义，并允许在其中直接嵌入表达式，表达式会被自动求值。
// 使用ES6模板字面量 root.style.setProperty(`--services-box-delay-${i}`, `${totalServicesLines}s`);
在这种写法中，${i} 和 ${totalServicesLines} 会自动被其对应的JavaScript变量值替换，使得代码更加清晰和易于维护。这是现代javascript开发中推荐的字符串拼接方式。
注意事项
- JavaScript变量与CSS自定义属性的区分：务必明确i和totalServicesLines是JavaScript变量，它们用于在运行时动态生成CSS自定义属性的名称和值。而–services-box-delay-X才是真正的CSS自定义属性。
- setProperty方法：element.style.setProperty(propertyName, value, priority)方法是设置元素内联样式（包括CSS自定义属性）的标准方式。
- propertyName：要设置的css属性名，对于自定义属性，需要以–开头。
- value：属性值。
- priority（可选）：优先级，例如”important”。
- CSS变量的命名规范：CSS自定义属性名必须以–开头，且区分大小写。
总结
在JavaScript中动态设置CSS自定义属性时，正确处理属性名的字符串拼接至关重要。理解JavaScript的字符串拼接机制，特别是在传统拼接方式中变量需要独立于字符串字面量进行求值，是避免常见错误的关键。此外，推荐使用ES6模板字面量来处理复杂的字符串拼接场景，它能显著提高代码的可读性和维护性。通过掌握这些技巧，开发者可以更灵活、高效地利用CSS自定义属性来构建动态的用户界面。
