如何用JavaScript/jQuery实现dd MMM, yyyy格式的本地化日期格式化？

好问题！确实toLocaleDateString()虽然能帮我们做本地化日期输出，但它默认的格式顺序没法直接满足dd MMM, yyyy的要求（比如英文环境会输出Jan 30, 2019而不是你要的30 Jan, 2019）。这里给你几种纯JavaScript的实现方式，完全不需要依赖Angular或者其他重型框架，jQuery环境下也能直接用：

方法1：手动拼接本地化部件 #

我们可以单独获取本地化后的日、短月、年三个部分，再按想要的顺序拼接起来。这种方式简单直接，而且能完美匹配你给出的各个语言示例：

function formatCustomLocalDate(timestamp, userLang = window.userLang) {
  const date = new Date(parseInt(timestamp));
  
  // 分别获取本地化的日、短月、年
  const localizedDay = date.toLocaleDateString(userLang, { day: 'numeric' });
  const localizedMonth = date.toLocaleDateString(userLang, { month: 'short' });
  const localizedYear = date.toLocaleDateString(userLang, { year: 'numeric' });
  
  // 按目标格式拼接
  return `${localizedDay} ${localizedMonth}, ${localizedYear}`;
}

// 使用示例
const timestamp = '1548806400000'; // 对应2019-01-30
console.log(formatCustomLocalDate(timestamp));
// 英文(en): "30 Jan, 2019"
// 法语(fr): "30 janv., 2019"
// 中文(zh-CN): "30日 1月, 2019年"

方法2：用Intl.DateTimeFormat.formatToParts()拆分部件 #

如果需要更精细地控制日期部件（比如处理一些特殊语言的格式细节），可以用Intl.DateTimeFormat的formatToParts()方法，它会把日期拆成结构化的部件数组，我们提取需要的部分再拼接：

function formatDateWithParts(timestamp, userLang = window.userLang) {
  const date = new Date(parseInt(timestamp));
  const formatter = new Intl.DateTimeFormat(userLang, {
    day: 'numeric',
    month: 'short',
    year: 'numeric'
  });
  
  // 获取结构化的日期部件数组
  const parts = formatter.formatToParts(date);
  
  // 提取日、月、年部件的值
  const day = parts.find(part => part.type === 'day').value;
  const month = parts.find(part => part.type === 'month').value;
  const year = parts.find(part => part.type === 'year').value;
  
  return `${day} ${month}, ${year}`;
}

// 使用示例
console.log(formatDateWithParts(timestamp, 'fr')); // 输出: "30 janv., 2019"

jQuery环境下的封装（可选） #

如果你的项目用了jQuery，也可以把这个功能封装成一个简单的工具方法：

$.extend({
  formatLocalDate: function(timestamp, userLang = window.userLang) {
    const date = new Date(parseInt(timestamp));
    const day = date.toLocaleDateString(userLang, { day: 'numeric' });
    const month = date.toLocaleDateString(userLang, { month: 'short' });
    const year = date.toLocaleDateString(userLang, { year: 'numeric' });
    return `${day} ${month}, ${year}`;
  }
});

// 使用示例
const formattedDate = $.formatLocalDate(timestamp, 'zh-CN');
console.log(formattedDate); // 输出: "30日 1月, 2019年"

这几种方式都能实现和Angular DatePipe类似的效果，而且完全基于原生JavaScript API，轻量又灵活。

内容的提问来源于stack exchange，提问作者J.K.A.