如何实现calculateElementHeight函数将数组元素整合到calc模板字面量？

直接用数组的map和join方法就能轻松搞定，逻辑简单清晰，还能兼容各种单位的offset值：

function calculateElementHeight(offsets) {
  // 处理空数组的边界情况，避免生成带多余空格的无效表达式
  if (!offsets.length) {
    return 'calc(100vh)';
  }
  // 给每个offset元素添加前缀" - "，再拼接成完整片段
  const offsetString = offsets.map(offset => ` - ${offset}`).join('');
  // 组合成最终的calc表达式
  return `calc(100vh${offsetString})`;
}

验证示例 #

• 输入['10px', '20px', '30px']，返回calc(100vh - 10px - 20px - 30px)
• 输入['10px', '20%', '30em']，返回calc(100vh - 10px - 20% - 30em)
• 输入空数组[]，返回calc(100vh)

逻辑说明 #

1. 先判断数组是否为空，避免生成calc(100vh )这种不符合CSS语法的表达式
2. 用map遍历每个offset元素，给每个元素前面加上-（减号加空格，完全贴合CSS calc的语法要求）
3. 用join('')把所有处理后的offset片段拼接成一个完整字符串
4. 最后将该字符串与calc(100vh和)组合，得到最终可用的CSS长度表达式

这个实现完全不关心offset的单位类型，只要输入的offset是合法的CSS长度单位，生成的表达式就会是有效的。

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