Định dạng javascript số 3 chữ số

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

<h1 style="color: green">

    

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;
}

1h1>

<

function prependZero(number) {
   if (number < 9)
       return "0" + number;
   else
       return number;
}

5

function prependZero(number) {
   if (number < 9)
       return "0" + number;
   else
       return number;
}

6

    

function prependZero(number) {
   if (number < 9)
       return "0" + number;
   else
       return number;
}

8

function prependZero(number) {
   if (number < 9)
       return "0" + number;
   else
       return number;
}

1

function prependZero(number) {
   if (number < 9)
       return "0" + number;
   else
       return number;
}

5_______57_______

<8_______3_______8_______4

prepended_number = ("0" + number).slice(-2) 

5

prepended_number = ("0" + number).slice(-2) 

6=

prepended_number = ("0" + number).slice(-2) 

8>

    

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>

<8_______3_______52_______9

prepended_number = ("0" + number).slice(-2) 

5

prepended_number = ("0" + number).slice(-2) 

6=h13>

    

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>

style2

<style4 style5=style7>

    =0

function prependZero(number) {
   if (number < 9)
       return "0" + number;
   else
       return number;
}

1style4>

<=5 =6==8>

    "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ọn

new 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ới

Khi 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ư

• 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
  

  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ư

  new Intl.NumberFormat(locales, options)
  
  // Or
  
  Intl.NumberFormat(locales, options)
  

  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ữ

// 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ữa

let 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

0

let 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

---

Joel Olawanle

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

Làm cách nào để định dạng chữ số trong JavaScript?

Làm cách nào để đặt dấu phẩy sau 3 chữ số trong JavaScript?

Làm cách nào để định dạng giá trị số trong JavaScript?

Làm cách nào để định dạng vị trí số 2 trong JavaScript?