JS实现文本着色时如何在变量数值范围配置中支持负数值

你之前使用的数值区间匹配方案默认通过split('-')拆分区间的上下限，遇到带负号的数值时会拆分失败，只要调整区间解析逻辑即可支持负数值区间，以下是两种可行方案：

方案1：保留原对象配置格式，修改解析逻辑 #

可以继续使用原有的字符串key写法，负区间直接按照下限-上限的格式编写即可，比如-5-0对应-5到0的区间，-10--5对应-10到-5的区间。

// 区间配置
var colorMatch = {
  '-5-0': 'blue',
  '0-19': 'red',
  '20-59': 'orange',
  '60-100': 'green'
}

// 匹配颜色的函数
function getColor(value) {
  for (const range in colorMatch) {
    // 用正则提取带可选负号的上下限数值
    const [min, max] = range.match(/-?\d+/g).map(Number)
    if (value >= min && value <= max) {
      return colorMatch[range]
    }
  }
  // 无匹配区间的默认返回颜色，可自行修改
  return 'gray'
}

方案2：改用数组结构配置（更推荐） #

这种方案不需要解析字符串，性能更高、配置更直观，不容易出现拼写错误，适合区间数量多、后续需要频繁调整的场景。

// 区间配置
const colorRanges = [
  { min: -5, max: 0, color: 'blue' },
  { min: 0, max: 19, color: 'red' },
  { min: 20, max: 59, color: 'orange' },
  { min: 60, max: 100, color: 'green' }
]

// 匹配颜色的函数
function getColor(value) {
  const match = colorRanges.find(range => value >= range.min && value <= range.max)
  return match ? match.color : 'gray'
}

注意事项 #

• 配置区间时尽量不要出现重叠，若必须重叠请把需要优先匹配的区间放在配置的最前面
• 可根据业务需求自行修改无匹配区间的默认返回颜色

// 测试用例
console.log(getColor(-3)) // 输出 blue
console.log(getColor(15)) // 输出 red
console.log(getColor(66)) // 输出 green

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