Phương thức padStart[] được sử dụng để đệm một chuỗi với một chuỗi khác theo một độ dài nhất định. Phần đệm được bắt đầu từ bên trái của chuỗi. Phải mất hai tham số, độ dài mục tiêu và chuỗi được thay thế bằng. Đầu tiên, số được định dạng được chuyển đổi thành một chuỗi bằng cách chuyển nó tới hàm tạo Chuỗi. Phương thức padStart[] được sử dụng trên chuỗi này với tham số độ dài được cung cấp là 2 và chuỗi được thay thế bằng ký tự '0'. Thao tác này sẽ định dạng bất kỳ số có một chữ số nào thành 2 chữ số bằng cách thêm '0' vào trước và để nguyên các số có 2 chữ số.
cú pháp
prepended_number = String[number].padStart[2, '0']
Ví dụ.
html
function prependZero[number] { if [number < 9] return "0" + number; else return number; }0
function prependZero[number] { if [number < 9] return "0" + number; else return number; }1
h1
>
function prependZero[number] { if [number < 9] return "0" + number; else return number; }1
prepended_number = ["0" + number].slice[-2]3
>
function prependZero[number] { if [number < 9] return "0" + number; else return number; }1_______8_______5
>
function prependZero[number] { if [number < 9] return "0" + number; else return number; }1
prepended_number = ["0" + number].slice[-2]3
>
style
2
=
0
function prependZero[number] { if [number < 9] return "0" + number; else return number; }1
style
4>
"color: green"
1
"color: green"
2____56_______3
"color: green"
2____56_______5
"color: green"
6
"color: green"
2____56_______8
"color: green"
2____57_______0
"color: green"
2>
2
"color: green"
2____57_______4
"color: green"
6
"color: green"
2>
7
"color: green"
2>
9
"color: green"
2>
7
"color: green"
2____58_______3
5
function prependZero[number] { if [number < 9] return "0" + number; else return number; }1
=
5>
đầu ra
Làm cách nào để định dạng số bằng cách thêm 0 vào trước các số có một chữ số?Làm cách nào để định dạng số bằng cách thêm 0 vào trước các số có một chữ số?
Khi bạn đang làm việc với dữ liệu từ API hoặc tài nguyên bên ngoài, bạn sẽ nhận được những dữ liệu này ở một số định dạng chung. Ví dụ: nếu bạn đang xây dựng cửa hàng, bạn có thể có dữ liệu như giá
Dữ liệu giá này có thể ở dạng một số chung chẳng hạn như 14340 hoặc bất kỳ số nào khác như trong mảng bên dưới
const books = [
{
"id": 001,
"name": "Clean Code",
"price": 10.99,
},
{
"id": 002,
"name": "Introduction to Algorithms",
"price": 1199,
},
{
"id": 003,
"name": "Programming Pearls",
"price": 1.05,
},
{
"id": 004,
"name": "Program or Be Programmed",
"price": 14340,
}
]
Bạn không muốn chuyển số trực tiếp vào ứng dụng hoặc trang web của mình vì người đọc và người dùng sẽ khó hiểu chúng
Ngay cả khi bạn thêm ký hiệu tiền tệ, nó cũng không khắc phục được sự cố vì bạn muốn thêm dấu phẩy và số thập phân vào đúng vị trí. Bạn cũng muốn mỗi đầu ra giá dựa trên đơn vị tiền tệ có định dạng phù hợp
Ví dụ: 14340 sẽ là $14,340. 00 [Đô la Mỹ] hoặc ₹14,340. 00 [Rupee] hoặc €14. 340,00 [Euross], v.v., tùy thuộc vào đơn vị tiền tệ, ngôn ngữ và kiểu dáng được xác định của bạn. Và bạn có thể chuyển đổi những con số này thành đơn vị tiền tệ bằng cách sử dụng phương pháp Intl.NumberFormat[]
trong JavaScript
Trong trường hợp bạn đang vội, đây là một ví dụ cơ bản về mã sẽ trông như thế nào
const price = 14340;
// Format the price above to USD using the locale, style, and currency.
let USDollar = new Intl.NumberFormat['en-US', {
style: 'currency',
currency: 'USD',
}];
console.log[`The formated version of ${price} is ${USDollar.format[price]}`];
// The formated version of 14340 is $14,340.00
Trong bài viết này, tôi sẽ giúp bạn hiểu từng tùy chọn ở trên, chức năng của chúng và cách sử dụng đúng phương pháp này để định dạng một số dưới dạng tiền tệ
Cách sử dụng Trình tạo Intl.NumberFormat[]
để định dạng số dưới dạng tiền tệ
Bạn có thể sử dụng hàm tạo Intl.NumberFormat[]
để tạo các đối tượng
const price = 14340;
// Format the price above to USD using the locale, style, and currency.
let USDollar = new Intl.NumberFormat['en-US', {
style: 'currency',
currency: 'USD',
}];
console.log[`The formated version of ${price} is ${USDollar.format[price]}`];
// The formated version of 14340 is $14,340.00
1 cho phép định dạng số theo ngôn ngữ, chẳng hạn như định dạng tiền tệHàm tạo này nhận hai tham số chính,
const price = 14340;
// Format the price above to USD using the locale, style, and currency.
let USDollar = new Intl.NumberFormat['en-US', {
style: 'currency',
currency: 'USD',
}];
console.log[`The formated version of ${price} is ${USDollar.format[price]}`];
// The formated version of 14340 is $14,340.00
2 và const price = 14340;
// Format the price above to USD using the locale, style, and currency.
let USDollar = new Intl.NumberFormat['en-US', {
style: 'currency',
currency: 'USD',
}];
console.log[`The formated version of ${price} is ${USDollar.format[price]}`];
// The formated version of 14340 is $14,340.00
3. Cả hai đều là tùy chọnnew Intl.NumberFormat[locales, options]
// Or
Intl.NumberFormat[locales, options]
Lưu ý rằng Intl.NumberFormat[]
có thể được gọi cùng hoặc không cùng với
const price = 14340;
// Format the price above to USD using the locale, style, and currency.
let USDollar = new Intl.NumberFormat['en-US', {
style: 'currency',
currency: 'USD',
}];
console.log[`The formated version of ${price} is ${USDollar.format[price]}`];
// The formated version of 14340 is $14,340.00
5. Cả hai sẽ tạo một phiên bản const price = 14340;
// Format the price above to USD using the locale, style, and currency.
let USDollar = new Intl.NumberFormat['en-US', {
style: 'currency',
currency: 'USD',
}];
console.log[`The formated version of ${price} is ${USDollar.format[price]}`];
// The formated version of 14340 is $14,340.00
1 mớiKhi bạn sử dụng hàm tạo Intl.NumberFormat[]
mà không chuyển bất kỳ ngôn ngữ hoặc tùy chọn nào, nó sẽ chỉ định dạng số bằng cách thêm dấu phẩy
const price = 14340;
console.log[new Intl.NumberFormat[].format[price]]; // 14,340
Bạn không theo định dạng số thông thường, như đã thấy ở trên. Bạn muốn định dạng các số này dưới dạng tiền tệ – để nó trả về ký hiệu tiền tệ với định dạng phù hợp mà không cần phải nối thủ công
Bây giờ chúng ta hãy khám phá cả hai tham số
Đối số đầu tiên. địa phương
Ngôn ngữ là một tham số tùy chọn có thể được truyền dưới dạng chuỗi. Nó đại diện cho một khu vực địa lý, chính trị hoặc văn hóa cụ thể. Nó chỉ định dạng số dựa trên ngôn ngữ và không phải là định dạng tiền tệ
const price = 143450;
console.log[new Intl.NumberFormat['en-US'].format[price]]; // 143,450
console.log[new Intl.NumberFormat['en-IN'].format[price]]; // 1,43,450
console.log[new Intl.NumberFormat['en-DE'].format[price]]; // 143.450
Bạn sẽ nhận thấy rằng các số hoặc giá hiện được định dạng cục bộ dựa trên ngôn ngữ. Bây giờ chúng ta hãy khám phá tham số tùy chọn để tùy chỉnh các số dưới dạng tiền tệ
Đối số thứ hai. Tùy chọn [Kiểu, Tiền tệ,…]
Đây là tham số chính và bạn có thể sử dụng nó để áp dụng nhiều định dạng hơn như định dạng tiền tệ. Đây là một đối tượng JavaScript chứa các tham số khác như
8. Bạn sử dụng điều này để chỉ định loại định dạng bạn muốn. Điều này nhận các giá trị như số thập phân, tiền tệ và đơn vị. Đối với bài viết này, bạn sẽ sử dụng đơn vị tiền tệ vì đó là kiểu mà bạn muốn định dạng sốconst price = 14340; // Format the price above to USD using the locale, style, and currency. let USDollar = new Intl.NumberFormat['en-US', { style: 'currency', currency: 'USD', }]; console.log[`The formated version of ${price} is ${USDollar.format[price]}`]; // The formated version of 14340 is $14,340.00
9. Một lựa chọn khác là tiền tệ. Bạn có thể sử dụng tùy chọn này để chỉ định đơn vị tiền tệ mà bạn muốn định dạng, chẳng hạn nhưconst price = 14340; // Format the price above to USD using the locale, style, and currency. let USDollar = new Intl.NumberFormat['en-US', { style: 'currency', currency: 'USD', }]; console.log[`The formated version of ${price} is ${USDollar.format[price]}`]; // The formated version of 14340 is $14,340.00
0,new Intl.NumberFormat[locales, options] // Or Intl.NumberFormat[locales, options]
1,new Intl.NumberFormat[locales, options] // Or Intl.NumberFormat[locales, options]
2,new Intl.NumberFormat[locales, options] // Or Intl.NumberFormat[locales, options]
3, v.v. Điều này cũng sẽ giúp cung cấp biểu tượng ở vị trí thích hợp dựa trên ngôn ngữnew Intl.NumberFormat[locales, options] // Or Intl.NumberFormat[locales, options]
// format number to US dollar
let USDollar = new Intl.NumberFormat['en-US', {
style: 'currency',
currency: 'USD',
}];
// format number to British pounds
let pounds = Intl.NumberFormat['en-GB', {
style: 'currency',
currency: 'GBP',
}];
// format number to Indian rupee
let rupee = new Intl.NumberFormat['en-IN', {
style: 'currency',
currency: 'INR',
}];
// format number to Euro
let euro = Intl.NumberFormat['en-DE', {
style: 'currency',
currency: 'EUR',
}];
console.log['Dollars: ' + USDollar.format[price]];
// Dollars: $143,450.00
console.log[`Pounds: ${pounds.format[price]}`];
// Pounds: £143,450.00
console.log['Rupees: ' + rupee.format[price]];
// Rupees: ₹1,43,450.00
console.log[`Euro: ${euro.format[price]}`];
// Euro: €143,450.00
Có các tùy chọn khác mà bạn rất có thể sẽ không bao giờ sử dụng hoặc thay đổi, chẳng hạn như
new Intl.NumberFormat[locales, options]
// Or
Intl.NumberFormat[locales, options]
4, được sử dụng để nhóm số bằng dấu phẩy [hoặc dấu chấm đối với một số ngôn ngữ]. Đây là một trường boolean – theo mặc định, nó được đặt thành new Intl.NumberFormat[locales, options]
// Or
Intl.NumberFormat[locales, options]
5. Đây là lý do tại sao đầu ra của bạn có dấu phẩy hoặc dấu chấm trong bài viết này [như $143,450. 00]Khi bạn đặt giá trị của nó thành
new Intl.NumberFormat[locales, options]
// Or
Intl.NumberFormat[locales, options]
6, bạn sẽ nhận thấy không còn nhóm nữalet euro = Intl.NumberFormat['en-DE', {
style: 'currency',
currency: 'EUR',
useGrouping: false,
}];
console.log[`Euro: ${euro.format[price]}`];
// Euro: €143450.00
Một lựa chọn khác là
new Intl.NumberFormat[locales, options]
// Or
Intl.NumberFormat[locales, options]
7. Bạn có thể sử dụng điều này để làm tròn biến giá của mình dựa trên số chữ số có nghĩa mà bạn đã đặt. Ví dụ: khi bạn đặt giá trị thành new Intl.NumberFormat[locales, options]
// Or
Intl.NumberFormat[locales, options]
8, thì new Intl.NumberFormat[locales, options]
// Or
Intl.NumberFormat[locales, options]
9 sẽ trở thành const price = 14340;
console.log[new Intl.NumberFormat[].format[price]]; // 14,340
0let pounds = Intl.NumberFormat['en-GB', {
style: 'currency',
currency: 'GBP',
maximumSignificantDigits: 3,
}];
console.log[`Pounds: ${pounds.format[price]}`];
// Pounds: £143,000
thì đấy. 🚀
Tôi hy vọng bài viết này xứng đáng với thời gian của bạn. Bây giờ bạn đã biết cách định dạng số dưới dạng tiền tệ bằng JavaScript mà không cần dựa vào bất kỳ thư viện bên ngoài nào
Khi làm việc với các thư viện như React, Vue và các thư viện khác, bạn có thể biến chức năng này thành một chức năng tiện ích, nhập nó vào bất kỳ thành phần nào của bạn và sử dụng nó thay vì cài đặt toàn bộ thư viện [trừ khi bạn cần nhiều chức năng hơn]
Chúc các bạn code vui vẻ
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Nhà phát triển Frontend & Người viết kỹ thuật
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu