Cách chuyển đổi số sang chuỗi trong JavaScript: Hướng dẫn đầy đủ kèm ví dụ

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu

JavaScript là một ngôn ngữ lập trình vô cùng quan trọng trong phát triển web. Đặc biệt, việc chuyển đổi kiểu dữ liệu đóng vai trò then chốt trong nhiều tình huống, chẳng hạn như xác thực dữ liệu nhập từ biểu mẫu và định dạng phản hồi API.
Trong bài viết này, chúng tôi cung cấp giải thích chi tiết về cách chuyển đổi số thành chuỗi trong JavaScript, bao gồm mọi thứ từ cách sử dụng cơ bản đến các kỹ thuật nâng cao.

Bằng cách đọc bài viết này, ngay cả những người mới bắt đầu cũng có thể hiểu cách chuyển đổi số thành chuỗi và áp dụng các kỹ thuật này một cách hiệu quả trong phát triển thực tế.

2. Các phương pháp cơ bản để chuyển đổi số thành chuỗi trong JavaScript

JavaScript cung cấp nhiều cách để chuyển đổi số thành chuỗi. Trong phần này, chúng tôi sẽ giải thích ba phương pháp được sử dụng phổ biến nhất.

2.1 Sử dụng hàm String()

Cách đơn giản nhất để chuyển đổi một số thành chuỗi là dùng hàm tích hợp String().

Ví dụ sử dụng

let num = 123;
let str = String(num);
console.log(typeof str); // "string"

Giải thích

• Bằng cách viết String(number), giá trị số sẽ được chuyển thành chuỗi.
• Số gốc không bị thay đổi; thay vào đó, một giá trị chuỗi mới được trả về.

Ưu điểm và lưu ý

• Mã nguồn ngắn gọn và dễ đọc.
• Kiểu dữ liệu được đảm bảo rõ ràng, giảm khả năng xảy ra lỗi.
• Tuy nhiên, nó không hỗ trợ việc cắt bỏ khoảng trắng hay áp dụng định dạng đặc biệt.

2.2 Sử dụng phương thức toString()

Phương thức toString() là một phương thức tích hợp của các đối tượng số trong JavaScript và cho phép chuyển đổi linh hoạt hơn.

Ví dụ sử dụng

let num = 456;
let str = num.toString();
console.log(str); // "456"

Giải thích

• Vì là một phương thức của đối tượng số, nó có thể được gọi trực tiếp trên các giá trị số.
• Nó cũng hỗ trợ chuyển đổi sang các hệ số khác nhau, chẳng hạn như nhị phân hoặc thập lục phân.

Ví dụ với chỉ định radix

let num = 255;
let binaryStr = num.toString(2); // binary
console.log(binaryStr); // "11111111"

Ưu điểm và lưu ý

• Bằng cách chỉ định radix, bạn có thể chuyển đổi số thành chuỗi đồng thời thay đổi hệ số.
• Sẽ phát sinh lỗi nếu giá trị là undefined hoặc null, vì vậy cần kiểm tra kiểu dữ liệu trước.

2.3 Sử dụng Template Literals

Trong JavaScript hiện đại, template literals (dấu back‑tick) cung cấp cách đơn giản và trực quan để chuyển đổi số thành chuỗi.

Ví dụ sử dụng

let num = 789;
let str = `${num}`;
console.log(str); // "789"

Giải thích

• Template literals cho phép chuyển đổi chuỗi một cách tự nhiên.
• Chúng có thể dễ dàng kết hợp với các chuỗi khác, tạo ra định dạng linh hoạt.

Ưu điểm và lưu ý

• Cú pháp đơn giản và dễ nhìn.
• Hỗ trợ định dạng phức tạp, bao gồm các biểu thức.
• Template literals được hỗ trợ từ ES6 trở lên, vì vậy cần chú ý đối với các trình duyệt cũ.

3. Chủ đề nâng cao: Chuyển đổi và định dạng các giá trị số đặc biệt

Trong phần này, chúng ta sẽ khám phá các kỹ thuật nâng cao để chuyển đổi số thành chuỗi trong JavaScript. Đặc biệt, việc xử lý các giá trị thập phân và chỉ định định dạng đầu ra thường được yêu cầu trong các dự án thực tế.

3.1 Xử lý số thập phân và chỉ định định dạng

Khi chuyển đổi các số có phần thập phân thành chuỗi, bạn có thể sử dụng các phương pháp cho phép kiểm soát cách hiển thị định dạng.

1. Sử dụng phương thức toFixed()

Phương thức toFixed() tạo ra một chuỗi đồng thời chỉ định số chữ số sau dấu thập phân.

Ví dụ sử dụng

let num = 123.456;
let str = num.toFixed(2);
console.log(str); // "123.46"

Giải thích

• Giá trị được làm tròn tới số chữ số thập phân được truyền vào làm đối số.
• Giá trị trả về là một chuỗi, vì vậy không cần thực hiện chuyển đổi bổ sung.

Ưu điểm và lưu ý

• Giá trị có thể được làm tròn nhiều hơn mong đợi, vì vậy có thể cần xử lý bổ sung khi độ chính xác quan trọng.
• Nếu không chỉ định đối số, mặc định là không có chữ số thập phân.

Ví dụ thực tế: Hiển thị tiền tệ

let price = 1234.5;
let formattedPrice = "$" + price.toFixed(2);
console.log(formattedPrice); // "$1234.50"

2. Sử dụng phương thức toPrecision()

Phương thức toPrecision() tạo ra một chuỗi bằng cách chỉ định tổng số chữ số có nghĩa.

Ví dụ sử dụng

let num = 123.456;
let str = num.toPrecision(4);
console.log(str); // "123.5"

Giải thích

• Bằng cách chỉ định số chữ số có nghĩa, việc làm tròn và định dạng được áp dụng đồng thời.

Ưu điểm và lưu ý

• Kết quả có thể được hiển thị dưới dạng ký hiệu mũ, khiến nó không phù hợp khi yêu cầu định dạng cố định.

3.2 Chuyển đổi sang định dạng Tiền tệ và Phần trăm

Khi hiển thị dữ liệu, thường cần định dạng các giá trị dưới dạng tiền tệ hoặc phần trăm.

1. Định dạng tiền tệ với Intl.NumberFormat

Đối tượng Intl.NumberFormat cho phép bạn dễ dàng định dạng số thành tiền tệ.

Ví dụ sử dụng

let price = 1234567.89;
let formatted = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formatted); // "￥1,234,568"

Giải thích

• Bằng cách chỉ định ngôn ngữ và mã tiền tệ, số sẽ được định dạng tự động một cách chính xác.
• Dấu phân cách hàng nghìn được áp dụng tự động, loại bỏ nhu cầu xử lý thủ công.

Ví dụ thực tế: Định dạng thành USD

let usdPrice = 1234.56;
let formattedUSD = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(usdPrice);
console.log(formattedUSD); // "$1,234.56"

2. Chuyển đổi sang định dạng Phần trăm

Ví dụ sau đây minh họa cách dễ dàng định dạng số thành phần trăm.

Ví dụ sử dụng

let rate = 0.1234;
let percent = new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 2 }).format(rate);
console.log(percent); // "12.34%"

Giải thích

• Các giá trị thập phân được chuyển đổi sang ký hiệu phần trăm, với khả năng kiểm soát số chữ số thập phân.

4. Các lưu ý quan trọng và xử lý lỗi khi chuyển đổi số và chuỗi

Mặc dù JavaScript giúp việc chuyển đổi giữa số và chuỗi trở nên dễ dàng, nhưng lỗi hoặc hành vi không mong muốn có thể xảy ra trong một số trường hợp. Phần này giới thiệu các lưu ý quan trọng và ví dụ thực tế về xử lý lỗi.

4.1 Phát hiện và xử lý NaN (Not a Number)

Trong JavaScript, NaN (Not a Number) xuất hiện khi các phép toán hoặc chuyển đổi số thất bại. Hãy xem lại cách phát hiện và xử lý nó một cách đúng đắn.

1. Phát hiện NaN cơ bản

Ví dụ: Tạo NaN

let result = "abc" * 2; // Invalid operation
console.log(result); // NaN

Như đã chỉ ra ở trên, các phép toán giữa chuỗi và số là không hợp lệ, dẫn đến NaN.

Ví dụ: Sử dụng isNaN()

let value = "abc" * 2;
console.log(isNaN(value)); // true

2. Sử dụng Number.isNaN()

Trong ES6, Number.isNaN() đã được giới thiệu để phát hiện chính xác hơn.

Ví dụ: Phát hiện nghiêm ngặt

console.log(isNaN("123"));          // false (due to type coercion)
console.log(Number.isNaN("123"));   // false (no type coercion)

Các điểm chính

• isNaN() thực hiện ép kiểu, có thể dẫn đến kết quả không mong đợi.
• Number.isNaN() không thực hiện ép kiểu, do đó đáng tin cậy hơn.

4.2 Kỹ thuật ngăn ngừa lỗi chuyển đổi kiểu

1. Ví dụ kiểm tra kiểu an toàn

Để ngăn ngừa lỗi không mong muốn do trộn lẫn số và chuỗi, bạn có thể thực hiện kiểm tra kiểu trước.

Ví dụ: Kiểm tra kiểu trước khi xử lý

let value = "123";

if (typeof value === "number") {
  console.log(value.toString());
} else if (!isNaN(value)) {
  console.log(String(Number(value)));
} else {
  console.log("Giá trị đầu vào không hợp lệ");
}

Explanation

• By checking the data type in advance and handling invalid values, overall safety is improved.

2. Setting Default Values

Setting default values is also an effective strategy when invalid input is provided.

Example: Applying a Default Value

function safeConvert(value) {
  return isNaN(value) ? "0" : String(value);
}

console.log(safeConvert("123")); // "123"
console.log(safeConvert("abc")); // "0"

Key Points

• By using isNaN() , processing can continue safely with a default value when errors occur.

4.3 Handling Floating-Point Precision Errors

JavaScript floating-point calculations can produce precision errors. Let’s review how to mitigate them.

1. Example of a Precision Error

let result = 0.1 + 0.2;
console.log(result); // 0.30000000000000004

2. Methods to Eliminate Precision Errors

Method 1: Using toFixed()

let result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30"

Method 2: Using Integer Arithmetic

let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

Key Points

• Floating-point arithmetic can introduce errors, so countermeasures are necessary.
• For financial calculations or precision-critical logic, integer arithmetic is recommended.

5. FAQ: Frequently Asked Questions and Troubleshooting

When converting numbers to strings in JavaScript, developers from beginners to intermediate levels often encounter various questions and issues. This section introduces common questions and their solutions.

5.1 How can I verify that a number has been converted into a string?

Question:
I want to confirm whether a number has been successfully converted into a string. Is there a simple way to check?

Answer:
You can verify the conversion by checking the data type of the result.

Example: Using the typeof Operator

let num = 123;
let str = String(num);
console.log(typeof str); // "string"

Key Points:

• The typeof operator returns the type of a variable as a string.
• To check whether a value is a number, use typeof num === “number” .

5.2 Why do errors occur when converting numbers?

Question:
An error occurred during code execution. What could be the cause?

Answer:
Errors may occur when the value being converted is undefined or null.

Example: Handling undefined and null Safely

let value = null;

// Chuyển đổi an toàn
let str = value !== null && value !== undefined ? String(value) : "Giá trị mặc định";
console.log(str); // "Giá trị mặc định"

Key Points:

• Checking for value existence in advance helps prevent errors.
• Setting a default value improves the stability of your code.

5.3 Why does the converted string not match the expected format?

Question:
After converting a number to a string, the number of decimal places or format is not what I expected. What should I do?

Answer:
Use toFixed() or Intl.NumberFormat to explicitly specify the format.

Example 1: Fixing Decimal Places

let num = 123.456;
let str = num.toFixed(2);
console.log(str); // "123.46"

Example 2: Adding Thousand Separators or Currency Symbols

let price = 1234567.89;
let formatted = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formatted); // "￥1,234,568"

Key Points:

• Select the appropriate method to control numeric display formats.
• International formatting should be considered when necessary.

5.4 How should I handle accidental conversion of non-numeric strings?

Câu hỏi:
Một chuỗi đã bị nhầm thành số, gây ra lỗi. Làm thế nào để tôi ngăn ngừa việc chuyển đổi sai?

Trả lời:
Kiểm tra dữ liệu đầu vào trước và xác nhận rằng nó là số trước khi thực hiện chuyển đổi.

Ví dụ: Kết hợp Kiểm tra và Chuyển đổi

let input = "abc"; // User input

if (!isNaN(input)) {
  let str = String(Number(input));
  console.log(str);
} else {
  console.log("Invalid input value.");
}

Các điểm chính:

• Kết hợp kiểm tra đầu vào với xử lý lỗi giúp ngăn ngừa việc xử lý dữ liệu không hợp lệ.
• Cần thận trọng hơn khi xử lý dữ liệu do người dùng nhập vào.

5.5 Làm sao tôi có thể duy trì độ chính xác của số thực?

Câu hỏi:
Tôi muốn giải quyết vấn đề khi 0.1 + 0.2 cho kết quả 0.30000000000000004.

Trả lời:
Vì phép toán số thực luôn gây ra lỗi độ chính xác, hãy sử dụng phép tính nguyên hoặc định dạng thập phân cố định.

Ví dụ 1: Sử dụng Phép tính Nguyên

let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

Ví dụ 2: Định dạng Số Thập phân

let result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30"

Các điểm chính:

• Các phép tính số thực có thể tạo ra lỗi, vì vậy cần có các biện pháp phòng ngừa.
• Tách dữ liệu tính toán ra khỏi dữ liệu hiển thị giúp tăng độ an toàn và độ chính xác.

6. Tóm tắt và Tài nguyên liên quan

Bài viết này cung cấp giải thích toàn diện về cách chuyển đổi số thành chuỗi trong JavaScript, bao gồm các phương pháp cơ bản, kỹ thuật nâng cao, các lưu ý quan trọng và các câu hỏi thường gặp. Hãy cùng xem lại những điểm quan trọng.

6.1 Tổng hợp các điểm chính

1. Các phương pháp chuyển đổi cơ bản

• Hàm String() : Đơn giản và thân thiện với người mới bắt đầu.
• Phương thức toString() : Linh hoạt, hỗ trợ chuyển đổi hệ cơ số và hệ thống số.
• Template Literals : Cú pháp hiện đại, mang lại sự rõ ràng và dễ sử dụng.

2. Định dạng nâng cao và kiểm soát hiển thị

• toFixed() : Kiểm soát số chữ số thập phân.
• Intl.NumberFormat : Đơn giản hoá việc định dạng tiền tệ và phần trăm.

3. Xử lý lỗi và các thực hành tốt

• Phát hiện NaN : Sử dụng isNaN() và Number.isNaN() để ngăn lỗi.
• Chuyển đổi kiểu an toàn : Kiểm tra kiểu dữ liệu trước khi xử lý.
• Xử lý độ chính xác của số thực : Dùng phép tính nguyên hoặc kiểm soát thập phân cố định.

4. Khắc phục sự cố dựa trên FAQ

• Các giải pháp thực tiễn cho lỗi nhập liệu và vấn đề định dạng.
• Ví dụ mã thực tế giúp củng cố kỹ năng khắc phục sự cố.

6.2 Các trường hợp sử dụng thực tiễn

Các kỹ thuật được giới thiệu trong bài viết này có thể áp dụng trong các kịch bản sau:

• Hiển thị giá trong thương mại điện tử : Cải thiện khả năng đọc bằng cách định dạng tiền tệ.
• Công cụ trực quan hoá dữ liệu : Định dạng giá trị số kèm đơn vị hoặc phần trăm.
• Kiểm tra đầu vào biểu mẫu : Xác thực và xử lý an toàn dữ liệu người dùng nhập.
• Ghi log và gỡ lỗi : Chuyển đổi giá trị số thành chuỗi để xuất ra rõ ràng.

6.3 Liên kết và tài liệu tham khảo

Đối với những ai muốn tìm hiểu sâu hơn hoặc tham khảo tài liệu chính thức, các nguồn sau được khuyến nghị:

• JavaScript String Object MDN Web Docs – String
• Hướng dẫn chi tiết về toFixed() và Định dạng Số MDN Web Docs – Number.toFixed()
• Sử dụng Intl.NumberFormat MDN Web Docs – Intl.NumberFormat

6.4 Lưu ý cuối cùng

Chuyển đổi số thành chuỗi trong JavaScript là một kỹ năng nền tảng được sử dụng rộng rãi trong các ứng dụng web.

Kỹ năng thu được từ bài viết này:

• Hiểu các kỹ thuật chuyển đổi kiểu cơ bản.
• Định dạng dữ liệu số một cách phù hợp cho các ngữ cảnh khác nhau.
• Viết mã ổn định và chống lỗi.

Hãy áp dụng các kỹ thuật này để xây dựng các ứng dụng web thực tiễn và đáng tin cậy.

Ghi chú bổ sung và Học tập trong tương lai

Để nâng cao hơn nữa kỹ năng JavaScript của bạn, hãy cân nhắc học các chuyển đổi ngược từ chuỗi sang số và các kỹ thuật thao tác kiểu dữ liệu nâng cao hơn. Những chủ đề này sẽ được đề cập trong các bài viết tương lai — hãy chờ đón!