JS Intl日期格式转换、货币数字转换、字符串对比

初遇你时动了情

于 2024-04-15 14:27:11 发布

阅读量161

点赞数 1

分类专栏： js 前端常用文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/u010843503/article/details/137779834

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端常用

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在JavaScript中使用Intl对象进行字符串的数值排序，包括中文首字母拼音排序，以及日期时间的格式化，如按指定时区显示和相对时间表达。还展示了货币格式化的不同样式。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app"></div>
		<script>
			// Intl 国际化转换
			/*
			Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比（Collator ），
			数字格式化（NumberFormat），日期和时间格式化（DateTimeFormat）。
			*/
			// 符串对比（Collator ）
			var array1=['15', '2', '100'];
			// Intl.Collator对象的数值排序参数进行改造下，则最后字符串按照字符串字面上的数值大小进行排序了
			let Collator1=array1.sort(new Intl.Collator(undefined, { numeric: true }).compare);
			console.log(Collator1)
			// 然后我们说说中文的排序，如果我们希望我们的中文按照首字母拼音排序，该怎么处理？
			var arrUsername = ["陈坤", "邓超", "杜淳", "冯绍峰", "韩庚", "胡歌", "黄晓明", "贾乃亮", "李晨", "李易峰", "鹿晗", "井柏然", "刘烨", "陆毅", "孙红雷"];
			arrUsername.sort();
			// 结果是：["井柏然", "冯绍峰", "刘烨", "孙红雷", "李易峰", "李晨", "杜淳", "胡歌", "贾乃亮", "邓超", "陆毅", "陈坤", "韩庚", "鹿晗", "黄晓明"]
			// 时，可以使用中文简体的BCF 47语言标记字符串zh进行排序，代码如下：
			console.log(arrUsername.sort(new Intl.Collator('zh').compare))
			// ：["陈坤", "邓超", "杜淳", "冯绍峰", "韩庚", "胡歌", "黄晓明", "贾乃亮", "井柏然", "李晨", "李易峰", "刘烨", "陆毅", "鹿晗", "孙红雷"]
			//Intl.DateTimeFormat对象
			// timeZone: 时区，比如上海“Asia/Shanghai”，纽约是"America/New_York"
			var time1=new Intl.DateTimeFormat('zh', {
				
			    year: 'numeric',  
			    month: '2-digit',
			    day: '2-digit',
			    hour: '2-digit',
			    minute: '2-digit',
			    second: '2-digit',
				timeZone:'Asia/Shanghai',
			    // hour12: false
				hourCycle:"h24"
			}).format(new Date())
			console.log(time1)
			var rtf = new Intl.RelativeTimeFormat('zh');
			rtf.format(-1, 'day');  // -1表示前一天，结果是："1天前"
			rtf.format(1, 'day');   // 1表示往后一天， 结果是："1天后"
			
			// 如果我们设置其他的参数，如下，则返回结果更有意思：
			var rtf = new Intl.RelativeTimeFormat('zh', {
			    numeric: 'auto'
			});
			rtf.format(-1, 'day');  // 结果是："昨天"
			rtf.format(1, 'day');   // 结果是："明天"
			// NumberFormt
			let number1=new Intl.NumberFormat('en-US', {
			    style: 'currency',
			    
			    currency:'GBP',
			    // 使用窄格式符号
			    currencyDisplay: 'narrowSymbol',
			}).format(100)
			console.log(number1)
			let rmb=new Intl.NumberFormat('cmn-Hans-CN', {
				  style: 'currency',
				  currency: 'CNY',
				  currencyDisplay: 'name',
				  minimumFractionDigits: 2,
				  maximumFractionDigits: 2,
				}).format(245)
				console.log(rmb)
		</script>
	</body>
</html>