为何Shopify主题JS代码仅在iPhone 12 mini Safari中报错？

核心原因分析 #

你的价格格式化代码在iPhone 12 mini的Safari中报错，主要是两个问题导致：

1. 空值/短字符串触发的调用错误
   当formatPrice.toString()的长度小于3时，match(/.{3}/g)会返回null，此时调用null.join(',')会直接抛出TypeError，触发错误模态框。这种场景可能在iPhone端遇到了低金额（如两位数、一位数价格），而其他浏览器测试时未覆盖该情况。
2. 正则逻辑的固有缺陷
   当前代码用正则从左到右每3位拆分字符串，不符合千位分隔符的常规逻辑（应该从右往左拆分，比如12345要变成12,345而非123,45）。这种逻辑错误可能在特定金额下引发异常，而Safari对这类错误的捕获机制更敏感。

修复方案 #

方案1：添加容错，避免null调用

先判断匹配结果是否有效，再执行拼接：

var priceStr = formatPrice?.toString() || '';
var priceParts = priceStr.match(/.{3}/g);
var formatPrice = priceParts ? priceParts.join(',') : priceStr;

方案2：改用正确的千位分隔符正则（推荐）

如果需求是给价格添加千位分隔符，直接用成熟的正则逻辑，避免手动拆分的问题：

// 先校验formatPrice有效性
if (formatPrice == null) return;
var formatPrice = formatPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

方案3：增加类型校验

避免formatPrice为undefined或null时调用toString()报错：

if (typeof formatPrice !== 'number' && typeof formatPrice !== 'string') {
  // 处理异常情况，比如返回默认值或终止格式化
  return;
}
var formatPrice = formatPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

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