jQuery插件开发疑问：调用自定义数字格式化插件为何返回undefined？

我来帮你排查下问题所在，你的插件现在返回undefined主要有几个原因，咱们一步步来修正：

问题分析 #

1. 缺少return语句：你的formatCommas函数里执行了格式化操作，但没有把结果返回出去，函数默认会返回undefined；
2. 混淆了jQuery插件类型：
   • $.fn.formatCommas是给jQuery DOM元素对象扩展的方法，你直接用$(number).formatCommas()时，这个jQuery对象包裹的是数字而非DOM元素，没法正确处理；
   • 你尝试的$.formatCommas(number)是调用jQuery命名空间下的方法，但你定义的是$.fn（元素集方法）下的方法，自然找不到对应的实现。

修正方案 #

根据你的需求（重复调用格式化数字的方法），更适合定义成jQuery工具方法（挂载在$下），如果需要兼顾DOM元素操作也可以扩展支持：

方案1：定义为jQuery工具方法（推荐，适合直接格式化数字） #

// 定义全局工具方法，直接接收数字参数
$.formatCommas = function(num) {
  // 先确保输入是数字，再执行格式化并返回结果
  return parseFloat(num).toLocaleString(undefined, { 
    minimumFractionDigits: 2, 
    maximumFractionDigits: 2 
  });
};

var number = 1000000;
// 直接调用工具方法格式化数字
var formatted = $.formatCommas(number);
console.log('formatted number: ' + formatted);
$('#number').val(number);
$('#formatted').val(formatted);

方案2：同时支持jQuery元素操作（比如格式化输入框值） #

如果你希望这个方法既能格式化数字，又能直接作用在DOM元素上（比如把输入框里的数字格式化），可以这么写：

// 给jQuery元素集扩展方法，用于处理DOM元素
$.fn.formatCommas = function() {
  // 遍历每个元素，处理值的格式化
  return this.each(function() {
    var num = parseFloat($(this).val());
    if (!isNaN(num)) {
      $(this).val(num.toLocaleString(undefined, { 
        minimumFractionDigits: 2, 
        maximumFractionDigits: 2 
      }));
    }
  });
};

// 同时定义全局工具方法，复用格式化逻辑
$.formatCommas = function(num) {
  return parseFloat(num).toLocaleString(undefined, { 
    minimumFractionDigits: 2, 
    maximumFractionDigits: 2 
  });
};

// 使用示例
var number = 1000000;
// 调用工具方法格式化数字
var formatted = $.formatCommas(number);
console.log('formatted number: ' + formatted);
$('#number').val(number);
$('#formatted').val(formatted);

// 也可以直接作用在输入框上，格式化其值
// $('#some-input').formatCommas();

关键要点 #

• 不管哪种插件类型，必须要有return语句才能返回预期结果；
• $.fn下的方法针对jQuery元素集合，内部的this指元素集合，需要遍历处理；
• $下的工具方法是全局可用的，直接接收参数处理即可。

内容的提问来源于stack exchange，提问作者nick.cook