前端对象Date、Number、String的toLocaleString方法介绍

前端中一些常见对象的toLocaleString()方法的介绍

  1. Date.prototype.toLocaleString():用于将日期对象转换为本地格式的字符串。它接受两个参数:区域设置和选项对象。可以使用选项对象来指定日期和时间的格式,例如日期格式、时间格式、星期几的缩写、月份的缩写等。
  2. Number.prototype.toLocaleString():用于将数字对象转换为本地格式的字符串。它接受两个参数:区域设置和选项对象。可以使用选项对象来指定数字的格式,例如小数位数、千位分隔符、货币符号等。
  3. String.prototype.toLocaleString():用于将字符串转换为本地格式的字符串。它接受两个参数:区域设置和选项对象。可以使用选项对象来指定字符串的格式,例如排序规则、大小写、尘世名称等。

这些方法都可以使用区域设置参数来指定要使用的语言和文化环境。默认情况下,它们会使用系统默认的区域设置。选项对象可以用来进一步指定格式化的细节,例如日期和时间格式、数字格式、字符串排序规则等。

请注意,不同的浏览器和版本可能对toLocaleString()方法的支持有所不同。在使用这些方法时,建议查阅相关文档以确保兼容性和正确的用法。

Date.prototype.toLocaleString()

toLocaleString()方法是 JavaScript 中用于将日期对象转换为本地格式化的方法。它返回一个字符串,表示给定日期对象按照指定的区域设置格式化为本地日期和时间格式。

语法:

javascript

vbnet 复制代码
const dateObj = new Date();
const options = {
// 可选的区域设置参数
locale: 'zh-CN', 
// 可选的日期和时间格式选项
dateStyle: 'full', 
timeStyle: 'medium', 
// 可选的星期几的缩写
weekday: 'long', 
// 可选的月份的缩写
month: 'long', 
// 可选的日期的缩写
day: 'numeric', 
// 可选的小时 12 小时制的缩写
hour12: true, 
// 可选的分钟、秒和毫秒的缩写
minute: 'numeric', 
second: 'numeric', 
millisecond: 'numeric', 
// 可选的时区偏移
timeZone: 'UTC' 
};

const formattedDate = dateObj.toLocaleString('zh-CN', options);
console.log(formattedDate); 
  • locale:指定要使用的区域设置。它可以是一个字符串,例如'zh-CN'表示中文(中国),或者是一个对象,其中包含localeoptions属性。如果省略该参数,则使用系统默认的区域设置。

  • options:一个对象,其中包含以下可选的属性:

    • dateStyle:指定日期部分的格式。它可以是以下值之一:

      • 'full':完整的日期和时间,例如'YYYY 年 M 月 D 日 HH:mm:ss'(12 小时制)或'YYYY 年 M 月 D 日 h:mm:ss a'(24 小时制)。
      • 'long':长格式的日期和时间,例如'YYYY 年 M 月 D 日'
      • 'medium':中等长度的日期和时间,例如'YYYY-MM-DD HH:mm:ss'(12 小时制)或'YYYY-MM-DD h:mm:ss a'(24 小时制)。
      • 'short':短格式的日期和时间,例如'YYYY-M-D'
    • timeStyle:指定时间部分的格式。它可以是以下值之一:

      • 'full':完整的时间,包括秒和毫秒,例如'HH:mm:ss.SSS'
      • 'long':长格式的时间,例如'HH:mm:ss'
      • 'medium':中等长度的时间,例如'HH:mm:ss'
      • 'short':短格式的时间,例如'HH:mm'
    • weekday:指定星期几的缩写。它可以是以下值之一:

      • 'long':完整的星期几名称,例如'星期一'
      • 'short':缩写的星期几名称,例如'周一'
      • 'narrow':简短的星期几名称,例如'一'
    • month:指定月份的缩写。它可以是以下值之一:

      • 'long':完整的月份名称,例如'一月'
      • 'short':缩写的月份名称,例如'1 月'
      • 'narrow':简短的月份名称,例如'1'
    • day:指定日期的缩写。它可以是以下值之一:

      • 'numeric':数字格式的日期,例如'1'
      • '2-digit':两位数字格式的日期,例如'01'
    • hour12:指定是否使用 12 小时制。如果为true,则使用 12 小时制;如果为false(默认值),则使用 24 小时制。

    • minutesecondmillisecond:指定分钟、秒和毫秒的缩写。它们可以是以下值之一:

      • 'numeric':数字格式的时间单位。
      • '2-digit':两位数字格式的时间单位。
    • timeZone:指定要使用的时区。它可以是一个字符串,例如'UTC'表示协调世界时(UTC),或者是一个对象,其中包含timeZoneoptions属性

Number.prototype.toLocaleString()

Number.prototype.toLocaleString() 是 JavaScript 中的一个方法,它用于将一个数字转换为一个表示该数字的字符串,这个字符串考虑到了特定地区的语言习惯。这对于国际化和本地化非常有用,因为不同的地区可能会以不同的方式格式化数字。

这个方法的基本语法如下:

css 复制代码
javascript复制代码
	numObj.toLocaleString([locales[, options]])
  • locales(可选):一个字符串或者字符串数组,表示需要转换成的地区。例如,"en-US" 表示美国英语,"zh-CN" 表示中国简体中文等。
  • options(可选):一个对象,包含一些格式化选项,如最小整数位数、小数位数、使用的货币符号等。

下面是一些示例:

markdown 复制代码
javascript复制代码
	let num = 123456.789;  

	  

	// 默认的地区和语言设置  

	console.log(num.toLocaleString());  

	// 输出可能是 "123,456.789"(这取决于浏览器的默认语言设置)  

	  

	// 指定美国英语  

	console.log(num.toLocaleString('en-US'));  

	// 输出 "123,456.789"  

	  

	// 指定中国简体中文  

	console.log(num.toLocaleString('zh-CN'));  

	// 输出 "123,456.789"(注意,虽然中国通常使用逗号作为千位分隔符,但这里还是使用了点,因为 JavaScript 的 Number.prototype.toLocaleString 方法并不总是遵循所有地区的格式化规则)  

	  

	// 使用选项  

	console.log(num.toLocaleString('en-US', {  

	  minimumIntegerDigits: 5,  

	  minimumFractionDigits: 2,  

	  maximumFractionDigits: 2  

	}));  

	// 输出 "0123,456.79"

需要注意的是,Number.prototype.toLocaleString() 的行为可能会因浏览器的实现和用户的语言设置而异。在某些情况下,它可能不会完全按照预期的方式格式化数字。如果你需要更精确的控制数字的格式化,可能需要考虑使用专门的库,如 Intl.NumberFormat

options 对象在 Number.prototype.toLocaleString 方法中用于指定一些附加的样式属性,以定制数字的格式化输出。options 对象可以包含多个参数,以下是一些常用的参数:

  1. localeMatcher:字符串,可能的值是 "lookup" 和 "best fit";用于选择地区匹配算法。
  2. style:字符串,可能的值是 "decimal"(默认,用于普通数字格式)、"currency"(用于货币格式)、"percent"(用于百分比格式)或 "unit"(用于单位格式)。
  3. currency :字符串,当 style 为 "currency" 时使用,指定货币类型,如 "USD" 代表美元,"EUR" 代表欧元等。
  4. currencyDisplay :字符串,当 style 为 "currency" 时使用,可能的值是 "symbol"(使用货币符号,如 $)、"code"(使用货币代码,如 USD)、"name"(使用货币名称,如美元)、"narrowSymbol"(使用狭窄的货币符号)。
  5. useGrouping:布尔值,指示是否使用分组分隔符(如千位分隔符)。
  6. minimumIntegerDigits:数字,整数部分的最小位数。不足的部分会用0填充。
  7. minimumFractionDigitsmaximumFractionDigits:数字,分别表示小数部分的最小和最大位数。
  8. minimumSignificantDigitsmaximumSignificantDigits:数字,分别表示整个数字(包括整数和小数部分)的最小和最大有效位数。
  9. notation:字符串,用于指定数字的表示法,如 "compact" 用于紧凑格式(如 "1K" 表示一千)。
  10. significantDigits:字符串,可能的值是 "auto" 或 "true",用于控制是否使用有效数字格式化。
  11. unit :字符串,当 style 为 "unit" 时使用,指定单位类型,如 "long" 或 "short"。
  12. unitDisplay :字符串,当 style 为 "unit" 时使用,可能的值是 "narrow"、"short"、"long"、"full-name"。

请注意,并非所有浏览器都支持所有 options 参数,而且具体支持哪些参数可能会因浏览器和地区设置的不同而有所差异。因此,在实际使用时,最好查阅最新的 ECMAScript 规范或特定浏览器的文档,以了解所支持的参数和它们的行为。

String.prototype.toLocaleString

String.prototype.toLocaleString 方法在 JavaScript 中用于返回该字符串的本地化表示形式。这通常用于根据特定地区的习惯格式化字符串,尤其是当字符串包含数字、日期或其他需要根据地区文化来格式化的内容时。

然而,对于纯文本字符串,toLocaleString 方法通常与普通的 toString 方法行为相同,因为文本字符串通常不需要地区特定的格式化。

当字符串包含数字或日期时,toLocaleString 可以根据地区的不同而返回不同的结果。例如,数字可能会使用逗号作为千位分隔符,日期可能会按照地区的习惯来显示月、日和年。

String.prototype.toLocaleString 方法不接受任何参数,因此它总是基于运行代码的环境的默认地区设置来格式化字符串。

下面是一些使用 String.prototype.toLocaleString 的例子:

javascript 复制代码
javascript复制代码
	let str = 'Hello, world!';  

	console.log(str.toLocaleString()); // 输出: "Hello, world!"  

	  

	// 假设有一个包含数字的字符串  

	let numStr = '123456.789';  

	console.log(numStr.toLocaleString()); // 输出可能类似于 "123,456.789",具体取决于默认的地区设置  

	  

	// 对于包含日期的字符串,格式化会更加明显  

	let dateStr = new Date().toString(); // 获取当前日期和时间的字符串表示  

	console.log(dateStr.toLocaleString()); // 输出可能类似于 "2023/6/20 下午3:15:30",具体取决于默认的地区设置

需要注意的是,尽管 String.prototype.toLocaleString 可以用于格式化字符串中的数字和日期,但通常更推荐使用 Number.prototype.toLocaleStringDate.prototype.toLocaleString 来分别格式化数字和日期对象,因为它们提供了更多的选项来定制输出格式。

相关推荐
中微子2 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102417 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y33 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁40 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry40 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录41 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟42 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui