输入
概览
这个库由用于D2L Brightspace的格式和解析数字,日期,时间和文件大小的API组成. 它还为共同术语提供了本地化.
寻找老人
d2l-intl图书馆? 还在这里 输入v2.x分支。 。 。 .
不如用标准 ECMAScript 国际化 API(ECMA-402) 财务报告和审定财务报表 相关的多填充首先,标准不包括任何解析功能。 此外, Blightspace 支持在组织和用户级别上精细的本地化定制—— 配置在本地的 API 中根本不存在 .
安装和使用
从国家预防机制安装:
npm install @brightspace-ui/intl
礛 import 只有您需要的功能 :
import { formatDate, formatTime } from '@brightspace-ui/intl/lib/dateTime.js';
import { formatNumber, formatPercent } from '@brightspace-ui/intl/lib/number.js';
所有API将自动通过 lang 属性 <html> 键。 他们也会寻找各种 data- 属性,该属性将存在于Brightspace页面中,用于访问覆盖和时区信息.
数字
数字格式
整数和十进制数字可以使用 : formatNumber。百分比可使用 formatPercent选项 options 参数表示四舍五入.
import { formatNumber, formatPercent } from '@brightspace-ui/intl/lib/number.js';
const number = formatNumber(8902.72, [options]); // -> '8,902.72' in en-US
const percent = formatPercent(0.333, [options]); // -> '33.3 %' in en-US
选项 :
- 最小动作数字: 要使用的最低分数位数。 可能的值范围从
0改为20; 默认为0。 。 。 . - 最大行动数字: 要使用的最大分数位数。 可能的值范围从
0改为20; 默认值大于minimumFractionDigits财务报告和审定财务报表3。 。 。 . - 组合: 是否使用分组分隔符, 如千分隔符; 默认为
true。 。 。 .
格式化为整数( 四舍五入到小数位数 0 ):
import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
const value = formatNumber(89.72, {
maximumFractionDigits: 0
}); // -> '90' in en-US
格式化为百分比( 四舍五入为小数位数 2, 但总是显示至少小数位数 2 ):
import { formatPercent } from '@brightspace-ui/intl/lib/number.js';
const value = formatPercent(0.333, {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}); // -> '33.30 %' in en-US
数字分析
这个 parseNumber 方法可用于解析在用户用地上所写的整数或小数.
import { parseNumber } from '@brightspace-ui/intl/lib/number.js';
const value = parseNumber('-8 942,39'); // -> -8942.39 in fr-CA
日期和时间
日期和时间格式
日期和时间可以在用户的用地中格式化 formatDate, (中文(简体) ), formatTime, (中文(简体) ), formatDateTime,以及 formatRelativeDateTime。 。 。 .
时间戳( 自纪元起的毫秒) 可以使用 : formatDateTimeFromTimestamp。 。 。 .
合并日期和时间采用格式 formatDateTime数字 :
import { formatDateTime } from '@brightspace-ui/intl/lib/dateTime.js';
const date = formatDateTime(
new Date(2015, 8, 23, 14, 5),
[options]
); // -> '2015-09-23 14:05' in sv-SE
选项 :
- 格式: 渲染日期- 时间时使用的模式; 默认为
'short'。 。 。 .- 满:长周日,月名和时区. 譬如说.
'Wednesday, September 23, 2015 1:25 PM EST' - 介质:简称. 譬如说.
'Sept 23, 2015 1:25 PM' - 简称: 日期格式简略. 譬如说.
'9/23/2015 1:25 PM'
- 满:长周日,月名和时区. 譬如说.
格式化 a 时间戳 作为日期和时间:
const dateString = formatDateTimeFromTimestamp(
1607097863123,
[options]
);
选项与 formatDateTime;此方法将时间戳转换为 Date 在用户中
配置时区,然后返回通过此日期的结果 formatDateTime。 。 。 .
格式化 a 时间戳 仅作为日期:
const dateString = formatDateFromTimestamp(
1607097863123,
[options]
);
选项与 formatDate;此方法将时间戳转换为 Date 在用户中
配置时区,然后返回通过此日期的结果 formatDate。 。 。 .
格式化 a 时间戳 仅限时间 :
const timeString = formatTimeFromTimestamp(
1607097863123,
[options]
);
选项与 formatTime;此方法将时间戳转换为 Date 在用户中
配置时区,然后返回通过此日期的结果 formatTime。 。 。 .
格式化 a 仅日期 (不含时间部分),使用 formatDate数字 :
import { formatDate } from '@brightspace-ui/intl/lib/dateTime.js';
const value = formatDate(
new Date(2015, 8, 23),
{format: 'full'}
); // -> 'miércoles 23 de septiembre de 2015' in es-MX
选项 :
- 格式: 渲染日期时使用的模式; 默认为
'short'。 。 。 .- 满:长周日和月名. 譬如说.
'Wednesday, September 23, 2015' - 介质:长月名. 譬如说.
'September 23, 2015' - 简称: 日期格式简略. 譬如说.
'9/23/2015' - 年份:仅以正月为正年. 譬如说.
'September 2015' - 月份日数:只限一月一日. 譬如说.
'September 23' - 短数月日:仅短一月一日. 譬如说.
'Sep 23' - 长周日:只有长的周一. 譬如说.
'Wednesday' - 简短的周刊: 工作日短。 譬如说.
'Wed' - 长月:仅长一月. 譬如说.
'September' - 短月数:仅短一月. 譬如说.
'Sep'
- 满:长周日和月名. 譬如说.
格式化 a 时间 (不含日期部分),使用 formatTime数字 :
import { formatTime } from '@brightspace-ui/intl/lib/dateTime.js';
const time = formatTime(
new Date(2015, 8, 23, 14, 5)
); // -> '오후 14:05' in ko-KR
选项 :
- 格式: 渲染时间时使用的模式; 默认为
'short'。 。 。 .- 满:包括时区. 譬如说.
'1:25 PM EST' - 介质 或者说 简称:排除时区,例如:.
'1:25 PM'
- 满:包括时区. 譬如说.
将日期/时间格式化为相对时间,使用 formatRelativeDateTime数字 :
import { formatRelativeDateTime } from '@brightspace-ui/intl/lib/dateTime.js';
const relativeDateTime = formatRelativeDateTime(
new Date(2024, 8, 18)
); // If today is 2024-08-22, -> 'last week' in en-US
日期解析
要解析用户语言中写的日期, 请使用 parseDate数字 :
import { parseDate } from '@brightspace-ui/intl/lib/dateTime.js';
const date = parseDate('2015-09-23'); // in fr-CA
date.getFullYear(); // -> 2015
date.getMonth(); // -> 8 (months are 0-11)
date.getDate(); // -> 23
时间分析
分析在用户语言中写入的时间, 使用 parseTime数字 :
import { parseTime } from '@brightspace-ui/intl/lib/dateTime.js';
const date = parseTime('14 h 05'); // in fr-CA
date.getHours(); // -> 14
date.getMinutes(); // -> 5
基于用户时区的日期/时间转换
将含有 UTC 日期的对象转换为含有对应日期的本地日期的对象 data-timezone 属性 :
import { convertUTCToLocalDateTime } from '@brightspace-ui/intl/lib/dateTime.js';
const UTCDateTime = {
month: 12,
date: 1,
year: 2015,
hours: 8,
minutes: 0,
seconds: 0
};
const localDateTime = convertUTCToLocalDateTime(
UTCDateTime
); // -> { month: 12, date: 1, year: 2015, hours: 3, minutes: 0, seconds: 0 } in America/Toronto
转换含有一个与 data-timezone 属于含有世界协调时日期的对象的属性:
import { convertLocalToUTCDateTime } from '@brightspace-ui/intl/lib/dateTime.js';
const localDateTime = {
month: 12,
date: 1,
year: 2015,
hours: 8,
minutes: 0,
seconds: 0
};
const UTCDateTime = convertLocalToUTCDateTime(
localDateTime
); // -> { month: 12, date: 1, year: 2015, hours: 13, minutes: 0, seconds: 0 } in America/Toronto
文件大小格式化
使用 formatFileSize 为用户的语境格式化文件大小.
import { formatFileSize } from '@brightspace-ui/intl/lib/fileSize.js';
const fileSize = formatFileSize(100); // -> '100 bytes' in en-US
列表格式
使用 getSeparator 以获取当前区域的适当列表分隔符。 这是一个分隔符,将用在口语中;注意分隔符包含一个空间,适合当地人使用.
import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
const separator = getSeparator(); // -> ', ' in en-US
const separator = getSeparator({ nonBreaking: true }); // -> ',\xa0' in en-US
选项 :
- 非断裂: boolean 旗帜, 是否使用非拆解空格而不是标准空格; 默认为
false
术语
使用 getTerminology 以定义术语值 d2l.Languages.Terminology.* 配置变量 .
import { getTerminology, TerminologyKey } from '@brightspace-ui/intl/lib/terminology.js';
// Get the terminology value defined by the d2l.Languages.Terminology.Educator config variable
const educatorTerminology = getTerminology(TerminologyKey.Educator);
语言本地化
这个 Localize 类允许在用户首选语言中显示文本.
资源
每个资源由一个名称和一个消息组成,必须在 JavaScript 对象中作为密钥值对提供:
{ myMessage: "This is my message" }
名称
名称应简洁而独到地描述案文的本地化. camelCase 建议,尽管 snake_case 财务报告和审定财务报表 kebab-case 也得到支持.
对于大型项目,资源可按下列方法分类: : 字符键。 例如: parentGroup:subGroup:messageName。 。 。 .
消息
信息必须符合 ICU 信件语法 格式。 它支持以下特征: 简单参数,则 select 格式 财务报告和审定财务报表 复数化。 。 。 .
说明: 避免使用ICU消息语法编号,日期和时间格式化功能. 亮空间允许定制这些如何本地化, 因此使用
formatNumber, (中文(简体) ),formatDate财务报告和审定财务报表formatTime换句话说.
使用 Localize
导入 Localize 并创建一个新的实例。 这个 importFunc 选项。 它将被传递一个语言标记, 用来获取资源 :
import { Localize } from '@brightspace-ui/intl/lib/localize.js';
const localizer = new Localize({
importFunc: async lang => (await import(`../lang/${lang}.js`)).default
});
等待资源到位后再试图使用:
await localizer.ready;
localize()
这个 localize() 方法用于将消息本地化.
如果信件含有参数,请在第二个参数中提供替换值:
const helloText = localizer.localize('hello', { firstName: 'Mary' });
localizeHTML()
丰富的格式可以包含在信件中,并用 localizeHTML() 方法.
基本格式
下列格式化元素被支持在框外:
<p>paragraphs</p>line<br></br>breaks(注意需要端标签)<b>bold</b><strong>strong</strong><i>italic</i><em>emphasis</em>
记住 <strong> 用于更重要的内容(浏览器用粗体显示此图像),而 <b> 仅以视觉方式显示文本,而不增加其重要性.
同样 <em> 强调 特定文本(浏览器使用斜体显示此图像),而 <i> 仅以斜体显示文字,而不强调.
示例
{
myMessage: "This is <b>bold</b> but <em>not</em> all that <strong>important</strong>."
}
高级格式
通过提供自定义标签的替换方法,可以实现更先进的格式化,这与参数类似:
{
goHome: "Go <homeLink>home</homeLink>"
}
然后导入 localizeMarkup数字 :
import { localizeMarkup } from '@brightspace-ui/intl/lib/localize.js';
,并提供标签替换方法:
localizer.localizeHTML('goHome', {
homeLink: chunks => localizeMarkup`<d2l-link href="/home">${chunks}</d2l-link>`
});
除基本格式要素外,这些额外要素也可用于替换方法:
<d2l-link><d2l-tooltip-help>
共同资源
一些本地化资源是常见的,在D2L应用中共享. 为了利用这些资源,设置 loadCommon 选项 :
import { Localize } from '@brightspace-ui/intl/lib/localize.js';
const localizer = new Localize({
loadCommon: true
});
本地化
以下通用术语的本地化值可以使用 localizeCommon(name)数字 :
导航
navigation:back:title(背书)navigation:next:title(下一个)navigation:previous:title(先前)
本地化
下列字符的本地化值可以使用 localizeCharacter(char)数字 :
'(隐患)&(卫士们)*(偷窥)\(回击):(结肠),(视频)>(比标出相<(小于标志)#(数字标志)%(百分比标志)|(管声)?(问号)"(引号)
const value = localizer.localizeCharacter('&'); // -> 'ampersand' in en-US
onResourcesChange
提供 onResourcesChange 用于在文档语言被更改并有更新资源时执行任务的回调函数:
const localizer = new Localize({
onResourcesChange: () => document.title = localizer.localize('pageTitle')
});
要停止监听更改, 请断开实例 :
localizer.disconnect()
发展与促进
复制后, 运行 npm install 以安装依赖.
运行测试带
开始 a @ web/ dev- server( 网络服务器) 测试带的主机:
npm start
这将允许您在浏览器中测试 intl 库, 并将随任何更改而更新 .
捐款
欢迎捐款,请提交拉力请求!
版本和发布
此 repo 配置为使用 semantic-release输入前缀 fix: 财务报告和审定财务报表 feat: 合并到 main。 。 。 .
为了学习如何从维护分支中产生主要释放和释放,请参见: 语义- 释放 GitHub 动作 文档.