Javascript sẽ xử lý một số như thế nào?

Trong JavaScript có nhiều cách để chuyển đổi giữa các kiểu dữ liệu. Chúng tôi đã giới thiệu cách chuyển đổi một số thành một chuỗi. Trong hướng dẫn ngắn này, chúng ta sẽ xem cách bạn có thể chuyển đổi một chuỗi thành một số trong JavaScript

Có nhiều trường hợp một số có thể được lưu trữ dưới dạng một chuỗi. Ví dụ: các giá trị nhận được từ một phần tử biểu mẫu luôn là các chuỗi

Nói chung, bạn có thể coi một chuỗi JavaScript chứa một số [và chỉ một số] như thể đó là một số và JavaScript sẽ tự động thực hiện chuyển đổi chuỗi thành số cho bạn. Tuy nhiên, đôi khi bạn cần trích xuất một số từ một chuỗi hoặc thực hiện nhiều quyền kiểm soát hơn đối với cách thực hiện chuyển đổi

Trong mẹo nhanh này, chúng tôi sẽ đề cập đến ba cách để chuyển đổi một chuỗi thành một số

Chuyển đổi một chuỗi thành một số bằng cách sử dụng số

Cách trực tiếp nhất để chuyển đổi một chuỗi thành một số trong JavaScript là sử dụng hàm dựng sẵn

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

6. Ví dụ

const str = "10"
console.log[str]; // "10"
console.log[typeof str]; // "string"

const number = Number[str];
console.log[number]; // 10
console.log[typeof number]; // "number"

Khi ghi giá trị của

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

7 và loại của nó vào bảng điều khiển, kết quả lần lượt là

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

8 dưới dạng chuỗi và

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

9. Sau khi chuyển đổi, kết quả lần lượt là

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

8 dưới dạng số và

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

1

Bạn có thể xem ví dụ đang hoạt động trong bản demo CodePen sau

Xem bút
Chuyển chuỗi thành số bằng Number[] của SitePoint [@SitePoint]
trên CodePen.

Xin lưu ý rằng nếu bạn chuyển một chuỗi không phải số cho một số, NaN sẽ được trả về

Chuyển đổi một chuỗi thành một số bằng cách sử dụng parseInt[] và parseFloat[]

Một cách tiếp cận khác là sử dụng

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

2 và

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

0. Như bạn có thể biết,

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

2 phân tích chuỗi thành số nguyên, trong khi đó,

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

0 phân tích chuỗi thành số có dấu thập phân

Ví dụ

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

Tương tự như cách tiếp cận đầu tiên, khi ghi giá trị của

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

7 và loại của nó vào bảng điều khiển, kết quả lần lượt là

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

4 dưới dạng chuỗi và

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

9. Tuy nhiên, khi phân tích cú pháp

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

7 bằng cách sử dụng

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

7, giá trị của

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

8 trở thành

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

8 và loại của nó là

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

1

Mặt khác, khi phân tích cú pháp

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

7 bằng cách sử dụng

const str = "10";
console.log[typeof str]; // "string"
console.log[+str]; // 10
console.log[typeof +str]; // "number"

2, giá trị của

const str = "10";
console.log[typeof str]; // "string"
console.log[+str]; // 10
console.log[typeof +str]; // "number"

3 trở thành

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

4 dưới dạng số và loại của nó là

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

1

Bạn có thể xem ví dụ đang hoạt động trong bản demo CodePen sau

Xem bút
Chuyển chuỗi thành số bằng parseInt[] và parseFloat[] của SitePoint [@SitePoint]
trên CodePen.

Đối số thứ hai của parseInt

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

2 lấy đối số thứ hai chỉ định cơ sở của số được phân tích cú pháp từ chuỗi. Đối số này trên thực tế là tùy chọn, nhưng bạn nên luôn cung cấp nó

Không có đối số thứ hai này,

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

7 thực hiện phát hiện cơ số tự động. Nghĩa là, nó phát hiện cơ số của một số theo định dạng của nó trong chuỗi. Một số bắt đầu bằng

const str = "10";
console.log[typeof str]; // "string"
console.log[+str]; // 10
console.log[typeof +str]; // "number"

8 hoặc

const str = "10";
console.log[typeof str]; // "string"
console.log[+str]; // 10
console.log[typeof +str]; // "number"

9 được coi là số thập lục phân [cơ số 16] và tất cả các số khác được coi là số thập phân

Vì vậy, ví dụ: nếu bạn gọi

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

60, giá trị đầu vào sẽ được coi là số bát phân;

Để tránh bất kỳ sự nhầm lẫn nào, hãy luôn chỉ định cơ sở khi sử dụng

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

2

Chuyển đổi một chuỗi thành một số bằng cách sử dụng Unary Plus

Cách thứ ba để chuyển đổi một chuỗi thành một số là sử dụng phép cộng đơn nguyên [

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

62]. Nếu phép cộng một ngôi được sử dụng trước một toán hạng, nó sẽ cố gắng chuyển đổi nó thành một số. Vì vậy, nếu toán hạng là một chuỗi chứa một số, phép cộng một ngôi sẽ chuyển đổi nó thành một số

Ví dụ

const str = "10";
console.log[typeof str]; // "string"
console.log[+str]; // 10
console.log[typeof +str]; // "number"

Khi bạn đăng nhập loại

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

7, như mong đợi, đó là

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

9. Tuy nhiên, khi bạn ghi giá trị của

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

65 và loại của nó, thì

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

8 và

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

1 sẽ được ghi vào bảng điều khiển tương ứng

Bạn có thể xem ví dụ đang hoạt động trong bản demo CodePen sau

Xem bút
Sử dụng Unary để chuyển đổi chuỗi theo SitePoint [@SitePoint]
trên CodePen.

Cách xử lý các ký tự không phải là số trong chuỗi

Điều quan trọng là phải tính đến các trường hợp trong đó một chuỗi có thể chứa các ký tự không phải là số và cách mỗi phương pháp xử lý vấn đề này

Khi sử dụng

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

68, nếu chuỗi chứa các ký tự không phải là số, dấu cộng[+] và dấu trừ[-] ở đầu hoặc dấu thập phân, thì giá trị trả về là giá trị đặc biệt NaN [Không phải là số]. NaN là một thuộc tính toàn cầu đại diện cho Not-a-Number. Nó được trả về bởi một số phép toán số khi toán hạng hoặc tham số của các phép toán đó không phải là số hoặc không thể được sử dụng cho phép toán cụ thể đó

Mặt khác,

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

2 và

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

0 phân tích cú pháp chuỗi nếu số ở đầu chuỗi. Nó loại bỏ các ký tự còn lại và lấy số gặp phải ở đầu chuỗi. Tuy nhiên, nếu chuỗi bắt đầu bằng các ký tự không phải là số, dấu cộng [+] và dấu trừ [-] ở đầu hoặc dấu thập phân, thì giá trị trả về là giá trị đặc biệt NaN [Không phải là số]

Bạn có thể thấy nó hoạt động trong bản demo CodePen sau

Xem Bút
Sự khác biệt giữa Số và parseInt theo SitePoint [@SitePoint]
trên CodePen.

Như bạn có thể thấy,

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

68 trả về NaN vì chuỗi chứa

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

72. Tuy nhiên,

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

2 trả về

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

8 vì nó ở đầu chuỗi

Bạn có thể kiểm tra xem một giá trị có phải là NaN hay không bằng cách sử dụng hàm toàn cục

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

75

Sự kết luận

Hướng dẫn ngắn này đã trình bày ba cách để chuyển đổi một chuỗi thành một số trong JavaScript.

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

68 có thể chuyển đổi một chuỗi thành một số, cho dù đó là số thực hay số nguyên. Tuy nhiên, nếu chuỗi chứa các ký tự khác, nó sẽ trả về NaN. Điều này hữu ích nếu bạn muốn đảm bảo chuyển đổi nghiêm ngặt chuỗi

Mặt khác,

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

2 và

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

0 là cách tiếp cận linh hoạt hơn về mặt xử lý các ký tự khác trong số. Tuy nhiên, hai chức năng này không thể sử dụng thay thế cho nhau trong một số trường hợp. Ví dụ: nếu số trong chuỗi là số float và bạn sử dụng

const str = "10.9"
console.log[str]; // "10.9"
console.log[typeof str]; // "string"

const intNumber = parseInt[str];
console.log[intNumber]; // 10
console.log[typeof intNumber]; // "number"

const floatNumber = parseFloat[str];
console.log[floatNumber]; // 10.9
console.log[typeof floatNumber]; // "number"

2, bạn sẽ nhận được giá trị không chính xác so với chuỗi

Mặc dù đơn nguyên dễ sử dụng nhưng nó có thể làm giảm khả năng đọc mã của bạn. Cho dù bạn chọn phương pháp nào, điều quan trọng là phải chú ý các trường hợp kết quả trả về có thể là NaN

Nếu bạn thấy bài viết này hữu ích, bạn cũng có thể thích những điều sau đây

• Học cách viết mã bằng JavaScript
• Cách học JavaScript nhanh. Sáu thủ thuật tư duy đơn giản
• Hơn 25 kỹ thuật mã hóa tốc ký JavaScript
• ES6 đang hoạt động. Phương pháp số mới
• ES6 đang hoạt động. Phương thức chuỗi mới - Chuỗi. nguyên mẫu. *
• Giá trị thật và sai. Khi tất cả không bình đẳng trong JavaScript

Chia sẻ bài viết này

Dianne Pena

Dianne là biên tập viên bản tin của SitePoint. Cô ấy đặc biệt thích tìm hiểu về JavaScript, CSS và các công nghệ front-end

JavaScript sẽ xử lý một số như thế nào khi nó được đặt trong dấu ngoặc kép hoặc dấu ngoặc đơn?

Làm cách nào để chuyển đổi chuỗi thành số trong JavaScript mdn?