Intl.DateTimeFormat.prototype.formatRangeToParts()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2021.
Phương thức formatRangeToParts() của các instance Intl.DateTimeFormat trả về một mảng các đối tượng biểu diễn từng phần của chuỗi được định dạng mà formatRange() sẽ trả về. Nó hữu ích để xây dựng các chuỗi tùy chỉnh từ các token đặc thù theo ngôn ngữ.
Try it
const startDate = new Date(Date.UTC(2007, 0, 10, 10, 0, 0)); // > 'Wed, 10 Jan 2007 10:00:00 GMT'
const endDate = new Date(Date.UTC(2007, 0, 10, 11, 0, 0)); // > 'Wed, 10 Jan 2007 11:00:00 GMT'
const dateTimeFormat = new Intl.DateTimeFormat("en", {
hour: "numeric",
minute: "numeric",
});
const parts = dateTimeFormat.formatRangeToParts(startDate, endDate);
for (const part of parts) {
console.log(part);
}
// Expected output (in GMT timezone):
// Object { type: "hour", value: "2", source: "startRange" }
// Object { type: "literal", value: ":", source: "startRange" }
// Object { type: "minute", value: "00", source: "startRange" }
// Object { type: "literal", value: " – ", source: "shared" }
// Object { type: "hour", value: "3", source: "endRange" }
// Object { type: "literal", value: ":", source: "endRange" }
// Object { type: "minute", value: "00", source: "endRange" }
// Object { type: "literal", value: " ", source: "shared" }
// Object { type: "dayPeriod", value: "AM", source: "shared" }
Cú pháp
formatRangeToParts(startDate, endDate)
Tham số
startDate-
Ngày bắt đầu của khoảng thời gian. Có thể là đối tượng
DatehoặcTemporal.PlainDateTime. Ngoài ra còn có thể là đối tượngTemporal.PlainTime,Temporal.PlainDate,Temporal.PlainYearMonth, hoặcTemporal.PlainMonthDaynếu đối tượngDateTimeFormatđược cấu hình để in ít nhất một phần liên quan của ngày.Note: Một đối tượng
Temporal.ZonedDateTimesẽ luôn ném raTypeError; hãy sử dụngTemporal.ZonedDateTime.prototype.toLocaleString()hoặc chuyển đổi nó thành đối tượngTemporal.PlainDateTime. endDate-
Ngày kết thúc của khoảng thời gian. Phải có cùng kiểu với
startDate.
Giá trị trả về
Một Array các đối tượng chứa khoảng thời gian được định dạng theo từng phần. Mỗi đối tượng có ba thuộc tính, type, value, và source, mỗi thuộc tính chứa một chuỗi. Việc nối chuỗi của value, theo thứ tự được cung cấp, sẽ cho ra cùng một chuỗi như formatRange(). type có thể có các giá trị giống như formatToParts(). source có thể là một trong các giá trị sau:
startRange-
Token là một phần của ngày bắt đầu.
endRange-
Token là một phần của ngày kết thúc.
-
Token được chia sẻ giữa ngày bắt đầu và kết thúc; ví dụ, nếu ngày bắt đầu và kết thúc có cùng khoảng thời gian trong ngày, token đó có thể được tái sử dụng. Tất cả các ký tự liên kết là một phần của mẫu khoảng, chẳng hạn ký tự phân cách
" – ", cũng được đánh dấu làshared.
Nếu ngày bắt đầu và kết thúc tương đương ở độ chính xác của đầu ra, thì đầu ra có cùng danh sách token như khi gọi formatToParts() trên ngày bắt đầu, với tất cả các token được đánh dấu là source: "shared".
Ví dụ
Sử dụng formatRangeToParts()
Phương thức formatRange() xuất ra các chuỗi được bản địa hóa và mờ đục, không thể thao tác trực tiếp:
const date1 = new Date(Date.UTC(1906, 0, 10, 10, 0, 0)); // Wed, 10 Jan 1906 10:00:00 GMT
const date2 = new Date(Date.UTC(1906, 0, 10, 11, 0, 0)); // Wed, 10 Jan 1906 11:00:00 GMT
const fmt = new Intl.DateTimeFormat("en", {
hour: "numeric",
minute: "numeric",
});
console.log(fmt.formatRange(date1, date2)); // '10:00 – 11:00 AM'
Tuy nhiên, trong nhiều giao diện người dùng bạn có thể muốn tùy chỉnh định dạng của chuỗi này, hoặc xen kẽ nó với các văn bản khác. Phương thức formatRangeToParts() tạo ra cùng thông tin theo từng phần:
console.log(fmt.formatRangeToParts(date1, date2));
// return value:
[
{ type: "hour", value: "10", source: "startRange" },
{ type: "literal", value: ":", source: "startRange" },
{ type: "minute", value: "00", source: "startRange" },
{ type: "literal", value: " – ", source: "shared" },
{ type: "hour", value: "11", source: "endRange" },
{ type: "literal", value: ":", source: "endRange" },
{ type: "minute", value: "00", source: "endRange" },
{ type: "literal", value: " ", source: "shared" },
{ type: "dayPeriod", value: "AM", source: "shared" },
];
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| ECMAScript® 2026 Internationalization API Specification # sec-Intl.DateTimeFormat.prototype.formatRangeToParts |