6The use and cases of toLocale series methods such as toLocaleString, toLocaleDateString, toLocaleTimeString, etc.

1. Introduction

In today’s field of front-end development, fast and efficient project construction tools and the use of the latest technology stack are very critical. The Vite + Vue3 combined project practical example column will lead you to understand and master this latest front-end development tool and framework.

As a next-generation front-end construction tool, Vite has outstanding advantages in startup speed and hot reload during development. Vue3, on the other hand, brings developers a smoother development experience with a more simplified API and a more efficient responsive system. Using Vite and Vue3 together, you will be able to quickly build a stable and efficient front-end project.

In this column, we will introduce all aspects of Vite + Vue3 in detail through 100+ practical examples. Starting from the creation and configuration of the project, we will guide you step by step to use Vite to build the basic framework of the project, and explain the syntax and features of Vue3 in depth. Then, we will demonstrate how to build common front-end components, routing management and state management, as well as interaction with back-end APIs and other common scenarios in actual project development.

Whether you are learning Vite + Vue3 from scratch, or want to further improve your front-end development capabilities, this column can provide you with practical knowledge and practical experience. Through the study of these 100+ practical examples, you will be able to master the core concepts and technologies of Vite + Vue3, and be able to flexibly apply them in actual projects.

Come join us and start your practical journey of Vite + Vue3 projects!

2. What are they? ? ?

toLocaleString, toLocaleDateString, toLocaleTimeString are methods in JavaScript for converting a date, time, or datetime object into a localized string representation. And the toLocaleLowerCase() method converts the string to lowercase according to the local host’s locale. The toLocaleUpperCase() method converts a string to uppercase according to the localhost’s locale. Case conversion is relatively simple, we will not do any explanation.

3. Benefits of using them ? ? ?

The advantage of using these methods is that the date and time can be displayed according to the language and time format of the user’s region, providing a better user experience. For example, in different regions, the format of the date and time may be different, and using these methods can display the date and time according to the user’s preference or regional habits.

The toLocaleString method returns a string representing the localized representation of this datetime object. The toLocaleDateString method returns a string representing the localized representation of this date object. The toLocaleTimeString method returns a string representing the localized representation of the time object.

4. Basic use of toLocaleString

1. Basic use

toLocaleString(locales?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;

2. Parameter description

2.1, locales: Indicates an array of strings used to specify the region or locale to be used, which can be a BCP 47 language tag.

Simplified Chinese (China)	zh-cn
Traditional Chinese (Hong Kong)	zh-hk
Traditional Chinese (Taiwan)	zh-tw
English (US)	en-us
English (Hong Kong)	en-hk
English (Global)	en-ww

2.2, options: optional parameter, representing an object, used to set formatting options.

localeMatcher	Specifies the matching algorithm to use when selecting regions, either “lookup” (default) or “best fit”. If it is “lookup”, the locale will be selected according to the sorting in the locales parameter. In the case of “best fit”, regions are selected based on some more complex rules.
style	Specify the type to format, can be “decimal” (number, default), “currency” (currency), “percent” (percentage), “unit” (unit). Different types have different formatting rules.
currency	Only required if style is “currency”, indicating the currency code to use.
currencyDisplay	Specifies how the currency is displayed, either “symbol” (currency symbol, default), “code” (currency code), or “name” (currency name).
useGrouping	Specifies whether to use the grouping separator (thousands separator), the default is true.
minimumIntegerDigits	Specify the minimum number of displayed digits in the integer part, and if it is insufficient, 0 will be padded in front.
minimumFractionDigits	Specify the minimum number of display digits for the decimal part, and if it is insufficient, 0 will be added at the end.
maximumFractionDigits	Specifies the maximum number of display digits for the fractional part, which will be rounded if exceeded.
minimumSignificantDigits	Specifies the minimum number of significant digits for a number.
maximumSignificantDigits	Specifies the maximum number of significant digits for a number.

3. Use cases

console.log('-----------------', 123456.8989.toLocaleString('zh-cn'))
// => ----------------- 123,456.899

console.log('?-----------------', state.val1.toLocaleString('zh-cn'))
// Amount in thousandths, plus an amount sign => ----------------- 12,345.679

console.log('-----------------', state.val1.toLocaleString('zh-cn', {style: \ 'currency', currency: 'CNY'}))
// Amount in thousandths, plus an amount sign, and one decimal place => ----------------- ￥12,345.68

console.log('-----------------', state.val1.toLocaleString('zh-cn', {style: \ 'currency', currency: 'CNY', maximumFractionDigits: 1}))
// => ----------------- ￥12,345.7

5. toLocaleDateString() and toLocaleTimeString()

1. Basic use

toLocaleDateString(locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;

2, toLocaleDateString and toLocaleTimeString parameter description

2.1 locale

An optional parameter indicating the locale to use, with a default value of the current locale where the code is executed. BCP 47 language tags can be used, such as “en-US” for American English, “zh-CN” for Simplified Chinese, etc.

2.2 options

Optional parameter, an object containing the following properties:

timeZone	Specifies the timezone to apply to the date, the default is the current timezone where the code is executed.
weekday	Such as “long” means the full day of the week name, such as “short” means the abbreviated day of the week name, such as “narrow” means the day of the week name using only one character.
year	Such as “numeric” means the year in digital form, such as “2-digit” means the year in two-digit form.
month	Such as “numeric” means the month in numeric form, such as “2-digit” means the month in two-digit form, such as “long” means the full month name, such as “short” means the abbreviated month Names such as “narrow” for month names using only one character.
the day	For example, “numeric” indicates a date in numeric form, such as “2-digit” indicates a date in two-digit form.
minute	For example, “numeric” means minutes in digital form, such as “2-digit” means two digits form minutes.
second	For example, “numeric” indicates the number of seconds in digital form, such as “2-digit” indicates the number of seconds in two-digit form number.
hour12	Specify whether to use 12-hour or 24-hour clock to express time. If set to true, the returned time string will use the 12-hour clock (eg, 5:30 PM), if set to false, the returned time string will use the 24-hour clock (eg, 17:30)
formatMatcher	Whether to use loose matching or strict matching to parse and format dates and times. If set to “basic”, use loose matching; if set to “best fit”, use strict matching.
era	Whether to include era information (eg, BC/AD) in the date string. If set to “narrow”, only short format epochs are displayed (for example, BC/AD); if set to “short”, short format epochs are displayed, such as (-5000/-4000AD); if set to “long” to display the long format epoch (eg, 5000 BC/4000 AD).
timeZoneName	Whether to include the time zone name in the time string. If set to “short”, display the short format time zone name, such as (PST); if set to “long”, display the long format time zone name, such as (Pacific Standard Time); if set to “none “, do not include the time zone name.
localeMatcher	Which matching strategy to use when parsing and formatting dates and times. If set to “lookup”, the best-fit locale is used; if set to “best fit”, the best-fit locale is used, as close as possible to the user’s preferred language.
hours	Specifies whether to include the hour part in the time string to be returned.

2.3 Use case

console.log('-----------------', state.val2.toLocaleDateString('zh-cn'))
// => ----------------- 2023/7/27

console.log('?-----------------', state.val2.toLocaleDateString('en-us'))
// => ----------------- 7/27/2023

3. toLocaleTimeString uses

3.2, use case

console.log('-----------------', state.val2.toLocaleString('zh-cn'))
// => ----------------- 2023/7/27 14:34:43

console.log('?-----------------', state.val2.toLocaleString('en-us'))
// => ----------------- 7/27/2023, 2:35:22 PM

console.log('-----------------', state.val2.toLocaleString('zh-cn', {hour12:true }))
// => ----------------- 2023/7/27 2:35:39 PM

console.log('?-----------------', state.val2.toLocaleTimeString('zh-cn', {hour12: true }))
// => ----------------- 2:35:44 PM

console.log('-----------------', state.val2.toLocaleTimeString('en-us'))
// => ----------------- 2:35:47 PM

console.log('?-----------------', state.val2.toLocaleTimeString())
// => ----------------- 14:36:02

console.log('-----------------', 'ABCD'.toLocaleLowerCase())
// => ----------------- abcd

console.log('?-----------------', 'abcd'.toLocaleUpperCase())
// => ----------------- ABCD

6. Summary

The toLocaleString, toLocaleDateString, and toLocaleTimeString methods can be used to display the date and time according to the language and time format of the user’s region, providing a better user experience.

I am Etc. End. Every progress is worth celebrating and every effort is worth appreciating. Don’t neglect your own growth, every step is the strength to move forward. If my article is helpful to you, I hope to leave your likes and collections. .

The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge