Working with the Intl object for internationalization in JavaScript
Jul 09, 2025 am 01:21 AM
Intl is a standard method for handling internationalization in JavaScript, providing localization of date, time, number, currency and string sorting. 1. Use Intl.DateTimeFormat to format dates and times according to the user language, such as automatically identifying or specifying locale output to different formats; 2. Use Intl.NumberFormat to realize localized display of numbers and currencies, supporting thousands of points, decimal points and currency symbols; 3. Use Intl.Collator to sort strings according to local rules to avoid problems caused by the default sorting method. These features are essential for developing multilingual applications, ensuring content is in line with local customs worldwide.
Intl objects are a standard and recommended way to deal with internationalization in JavaScript. It provides a series of constructors and methods for formatting dates, times, numbers, currencies, and sorting strings, which can automatically adapt to the user's locale. This is very critical for building multilingual websites or applications.
Format time and date using Intl.DateTimeFormat
When you need to display localized date and time formats based on the user's region, you can use Intl.DateTimeFormat .
const now = new Date();
const options = {
year: 'numeric',
month: 'long',
day: 'numeric'
};
// Automatically identify the system locale console.log(new Intl.DateTimeFormat(undefined, options).format(now));
// Output example: February 3, 2025 (English) or February 3, 2025 (Chinese)You can specify the locale explicitly, for example:
new Intl.DateTimeFormat('zh-CN', options).format(now); // Chinese format new Intl.DateTimeFormat('de-DE', options).format(now); // German format
hint :
- If you do not pass in the locale parameter, the language settings of the running environment will be used by default.
- The browser's current language can be obtained through
navigator.language.- Common uses include: displaying friendly time, calendar components, form submission time display, etc.
Using Intl.NumberFormat to process numbers and currencies
Number formatting also varies greatly in different regions, such as the millite mark, decimal form, and even currency units.
const number = 123456.789;
// Default format console.log(new Intl.NumberFormat().format(number)); // For example, 123,456.789 (English)
// Specify the German format (comma is the decimal point)
console.log(new Intl.NumberFormat('de-DE').format(number)); // Output 123.456,789
// Currency format console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number)); // $123,456.79
console.log(new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(number)); // ￥123,456.79suggestion :
- In e-commerce and financial projects, the currency format must be correctly corresponding to the user's country.
- Pay attention to whether the currency code complies with ISO standards, such as USD, EUR, CNY, etc.
- If the user switches language or region, the format should be recalculated and updated.
Localized sorting is achieved using Intl.Collator
There are different rules for string sorting in different languages, such as the vowel (?, ?, ü) in German and the ? in Spanish. Use Intl.Collator to sort more accurately.
const names = ['?pple', 'apple', 'zoo', '?andú']; names.sort(new Intl.Collator('de').compare); console.log(names); // In German sorting, ? and a are close names.sort(new Intl.Collator('es').compare); console.log(names); // In Spanish, n is after n
Notice :
- Don't rely on the default
.sort()method, as it is sorted only in Unicode characters.- In scenarios where lists and search results need to be sorted, pay special attention to the impact of the locale.
- Supports sensitivity control, case ignorance and other options.
Basically that's it. The features offered by Intl, while seemingly simple, are critical when implementing true multilingual support. If used properly, your application can "speak locally" around the world.
The above is the detailed content of Working with the Intl object for internationalization in JavaScript. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Build international web applications using the FastAPI framework
Sep 29, 2023 pm 03:53 PM
Use the FastAPI framework to build international Web applications. FastAPI is a high-performance Python Web framework that combines Python type annotations and high-performance asynchronous support to make developing Web applications simpler, faster, and more reliable. When building an international Web application, FastAPI provides convenient tools and concepts that can make the application easily support multiple languages. Below I will give a specific code example to introduce how to use the FastAPI framework to build
Use the Gin framework to implement internationalization and multi-language support functions
Jun 23, 2023 am 11:07 AM
With the development of globalization and the popularity of the Internet, more and more websites and applications have begun to strive to achieve internationalization and multi-language support functions to meet the needs of different groups of people. In order to realize these functions, developers need to use some advanced technologies and frameworks. In this article, we will introduce how to use the Gin framework to implement internationalization and multi-language support capabilities. The Gin framework is a lightweight web framework written in Go language. It is efficient, easy to use and flexible, and has become the preferred framework for many developers. besides,
Develop mobile application solutions with internationalization support using Vue.js and Kotlin language
Jul 31, 2023 pm 12:01 PM
Use Vue.js and Kotlin language to develop mobile application solutions with international support. As the process of globalization accelerates, more and more mobile applications need to provide multi-language support to meet the needs of global users. During the development process, we can use Vue.js and Kotlin languages ??to implement internationalization functions so that the application can run normally in different language environments. 1. Vue.js international support Vue.js is a popular JavaScript framework that provides a wealth of tools and features.
Internationalization library in PHP8.0
May 14, 2023 pm 05:51 PM
Internationalization library in PHP8.0: UnicodeCLDR and Intl extensions With the process of globalization, the development of cross-language and cross-region applications has become more and more common. Internationalization is an important part of achieving this goal. In PHP8.0, UnicodeCLDR and Intl extensions were introduced, both of which provide developers with better internationalization support. UnicodeCLDRUnicodeCLDR(CommonLocaleDat
How to use the Webman framework to achieve internationalization and multi-language support?
Jul 09, 2023 pm 03:51 PM
Nowadays, with the continuous development of Internet technology, more and more websites and applications need to support multi-language and internationalization. In web development, using frameworks can greatly simplify the development process. This article will introduce how to use the Webman framework to achieve internationalization and multi-language support, and provide some code examples. 1. What is the Webman framework? Webman is a lightweight PHP-based framework that provides rich functionality and easy-to-use tools for developing web applications. One of them is internationalization and multi-
Building Multilingual Websites with PHP: Eliminating Language Barriers
Feb 19, 2024 pm 07:10 PM
1. Prepare the database to create a new table for multilingual data, including the following fields: CREATETABLEtranslations(idINTNOTNULLAUTO_INCREMENT,localeVARCHAR(255)NOTNULL,keyVARCHAR(255)NOTNULL,valueTEXTNOTNULL,PRIMARYKEY(id)); 2. Set the language switching mechanism on the website Add a language switcher to the top or sidebar to allow users to select their preferred language. //Get the current language $current_locale=isset($_GET["locale"])?$_
How to deal with multi-language and internationalization issues in PHP development
Oct 09, 2023 pm 04:24 PM
How to deal with multi-language and internationalization issues in PHP development requires specific code examples. With the development of the Internet, people's demand for multi-language and internationalization is getting higher and higher. In PHP development, how to effectively handle multi-language and internationalization issues has become an important task that developers need to solve. Handling of character encoding In PHP development, we must first ensure that character encoding is handled correctly. In multi-language environments, using UTF-8 encoding is the most common choice. You can add the following code to the head of the PHP file: header('C
How to use the Hyperf framework for internationalization support
Oct 22, 2023 am 08:14 AM
How to use the Hyperf framework for international support With the rapid development of globalization, many applications need to have multi-language support functions to meet the needs of users in different countries and regions. As a lightweight, high-performance framework, the Hyperf framework provides international support functions and can help developers quickly develop multi-language applications. This article will introduce how to use internationalization functions in the Hyperf framework and provide corresponding code examples. 1. Configure multi-language support. First, you need to configure the Hyperf configuration file.
