如何在Next.js即时报价计算器中实现语言组差异化定价

1. 定义语言组-单价映射表 #

先创建一个清晰的映射对象，把语言组和对应单价关联起来，方便后续快速查找：

// 语言组与单价的映射关系
const groupPriceMap = {
  1: 0.05,
  2: 0.06,
  3: 0.07,
  4: 0.08
};

2. 封装单价获取函数 #

写一个复用性强的函数，根据传入的语言对象返回对应单价，同时做兜底处理避免异常：

// 根据语言对象获取对应单价，默认返回0.05作为兜底
const getUnitPrice = (language) => {
  if (!language?.group) return 0.05;
  return groupPriceMap[language.group] || 0.05;
};

3. 替换原有计算逻辑 #

把原来固定单价的计算逻辑，替换成调用上面的函数获取动态单价，再计算总价：

假设你原本的计算函数是这样的：

// 原固定单价计算逻辑
const calculateQuote = (wordCount) => {
  return wordCount * 0.05;
};

修改为支持差异化定价的版本：

// 整合差异化定价后的计算函数
const calculateQuote = (wordCount, selectedLanguage) => {
  const unitPrice = getUnitPrice(selectedLanguage);
  // 可根据需求保留小数位数，比如保留两位
  return Number((wordCount * unitPrice).toFixed(2));
};

4. 实际使用示例 #

比如用户从下拉框选中某语言后，调用计算函数：

// 示例：选中"English UK"时计算1500词的报价
const selectedLanguage = allLanguages.find(lang => lang.name === 'English UK');
const totalQuote = calculateQuote(1500, selectedLanguage);
console.log(totalQuote); // 输出120.00

边界情况处理 #

• 如果传入的selectedLanguage为空或未定义，函数会返回默认单价0.05
• 如果语言组不在映射表中（比如后续新增语言组未更新映射），同样会使用默认单价，避免报错

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