Phương thức nào được sử dụng để chuyển đổi một số trong chuỗi thành số nguyên trong JavaScript?

Có hai cách chính để chuyển đổi một chuỗi thành một số trong JavaScript. Một cách là phân tích cú pháp và cách khác là thay đổi loại của nó thành Số. Tất cả các thủ thuật trong các câu trả lời khác (e. g. , cộng đơn nguyên) liên quan đến việc ép buộc loại chuỗi thành một số. Bạn cũng có thể làm điều tương tự một cách rõ ràng với hàm Number

phân tích cú pháp

var parsed = parseInt("97", 10);

parseInt và parseFloat là hai hàm được sử dụng để phân tích chuỗi thành số. Quá trình phân tích cú pháp sẽ dừng âm thầm nếu nó chạm vào một ký tự mà nó không nhận ra, điều này có thể hữu ích để phân tích cú pháp các chuỗi như "92px", nhưng nó cũng hơi nguy hiểm, vì nó sẽ không gây ra bất kỳ loại lỗi nào cho bạn khi đầu vào không hợp lệ, thay vào đó bạn . Khoảng trắng ở đầu chuỗi bị bỏ qua. Đây là một ví dụ về việc nó làm điều gì đó khác với những gì bạn muốn và không đưa ra dấu hiệu nào cho thấy đã xảy ra sự cố

var widgetsSold = parseInt("97,800", 10); // widgetsSold is now 97

Bạn nên luôn chỉ định cơ số làm đối số thứ hai. Trong các trình duyệt cũ hơn, nếu chuỗi bắt đầu bằng 0, nó sẽ được hiểu là bát phân nếu cơ số không được chỉ định, điều này khiến nhiều người ngạc nhiên. Hành vi cho hệ thập lục phân được kích hoạt bằng cách có chuỗi bắt đầu bằng 0x nếu không có cơ số nào được chỉ định, e. g. , 0xff. Tiêu chuẩn thực sự đã thay đổi với , vì vậy các trình duyệt hiện đại không còn kích hoạt hệ bát phân khi có số 0 đứng đầu nếu không có cơ số nào được chỉ định. parseInt hiểu các cơ số lên đến cơ số 36, trong trường hợp đó, cả chữ hoa và chữ thường đều được coi là tương đương

Thay đổi loại chuỗi thành số

Tất cả các thủ thuật khác được đề cập ở trên không sử dụng parseInt, liên quan đến việc ép buộc hoàn toàn chuỗi thành một số. Tôi thích làm điều này một cách rõ ràng,

var cast = Number("97");

Điều này có hành vi khác với các phương pháp phân tích cú pháp (mặc dù nó vẫn bỏ qua khoảng trắng). Nó nghiêm ngặt hơn. nếu nó không hiểu toàn bộ chuỗi thì nó trả về NaN, vì vậy bạn không thể sử dụng nó cho các chuỗi như 97px. Vì bạn muốn một số nguyên thủy hơn là một đối tượng bao bọc Số, hãy đảm bảo rằng bạn không đặt new trước hàm Số

Rõ ràng, chuyển đổi thành Số cung cấp cho bạn một giá trị có thể là số float chứ không phải số nguyên, vì vậy nếu bạn muốn một số nguyên, bạn cần sửa đổi nó. Có một vài cách để làm điều này

var rounded = Math.floor(Number("97.654"));  // other options are Math.ceil, Math.round
var fixed = Number("97.654").toFixed(0); // rounded rather than truncated
var bitwised = Number("97.654")|0;  // do not use for large numbers

Bất kỳ toán tử theo chiều bit nào (ở đây tôi đã thực hiện theo chiều bit hoặc, nhưng bạn cũng có thể thực hiện phép phủ định kép như trong câu trả lời trước đó hoặc dịch chuyển bit) sẽ chuyển đổi giá trị thành số nguyên 32 bit và hầu hết chúng sẽ chuyển đổi thành số nguyên có dấu. Lưu ý rằng điều này sẽ không làm bạn muốn đối với số nguyên lớn. Nếu số nguyên không thể được biểu diễn trong 32 bit, nó sẽ bao bọc

~~"3000000000.654" === -1294967296
// This is the same as
Number("3000000000.654")|0
"3000000000.654" >>> 0 === 3000000000 // unsigned right shift gives you an extra bit
"300000000000.654" >>> 0 === 3647256576 // but still fails with larger numbers

Để làm việc chính xác với các số lớn hơn, bạn nên sử dụng các phương pháp làm tròn

Math.floor("3000000000.654") === 3000000000
// This is the same as
Math.floor(Number("3000000000.654"))

Hãy nhớ rằng sự ép buộc hiểu ký hiệu hàm mũ và Vô cực, vì vậy,

var widgetsSold = parseInt("97,800", 10); // widgetsSold is now 97

0 là

var widgetsSold = parseInt("97,800", 10); // widgetsSold is now 97

1 chứ không phải NaN, trong khi các phương thức phân tích cú pháp thì không

Phong tục

Không chắc là một trong hai phương pháp này thực hiện chính xác những gì bạn muốn. Ví dụ: thông thường tôi muốn có lỗi nếu phân tích cú pháp không thành công và tôi không cần hỗ trợ cho Vô cực, hàm mũ hoặc khoảng trắng ở đầu. Tùy thuộc vào trường hợp sử dụng của bạn, đôi khi bạn nên viết một hàm chuyển đổi tùy chỉnh

Luôn kiểm tra xem đầu ra của Số hoặc một trong các phương pháp phân tích cú pháp có phải là loại số bạn mong đợi không. Bạn gần như chắc chắn sẽ muốn sử dụng

var widgetsSold = parseInt("97,800", 10); // widgetsSold is now 97

2 để đảm bảo số đó không phải là NaN (thường là cách duy nhất để bạn phát hiện ra rằng phân tích cú pháp không thành công)

Trong JavaScript, có nhiều cách để chuyển đổi giữa. 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 Number. 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 str và loại của nó vào bảng điều khiển, kết quả lần lượt là 10 dưới dạng chuỗi và string. Sau khi chuyển đổi, kết quả lần lượt là 10 dưới dạng số và number

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

Xem cây bút
Chuyển đổi một chuỗi thành một số với Number() bởi 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ố,

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 parseInt() 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ể thấy, parseInt() phân tích một chuỗi thành một 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 một chuỗi thành một 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 str 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à string. Tuy nhiên, khi phân tích cú pháp str 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 10 và loại của nó là number

Mặt khác, khi phân tích cú pháp str 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à number

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

Xem cây bút
Chuyển đổi Chuỗi thành Số bằng parseInt() và parseFloat() của SitePoint (@SitePoint)
trên CodePen

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

parseInt() nhận đố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 Number0, giá trị đầu vào sẽ được coi là một 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 parseInt()

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 (Number2). 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 str, như mong đợi, đó là string. Tuy nhiên, khi bạn ghi giá trị của Number5 và loại của nó, thì 10 và number đượ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 cây 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 Number8, 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ề 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, parseInt() 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 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 cây 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, Number8 trả về NaN vì chuỗi chứa str2. Tuy nhiên, parseInt() trả về 10 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ầu str5

Phần 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. Number8 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, parseInt() 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à những 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 parseInt(), thì 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à giả. 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

Phương thức nào được sử dụng để chuyển đổi một số trong chuỗi thành số nguyên trong JS?

Hàm nào được sử dụng để chuyển đổi một số thành một số nguyên JavaScript?

Chúng ta có thể chuyển đổi giá trị chuỗi thành số trong JavaScript không?

Hàm nào trong JavaScript chuyển đổi một số của một chuỗi?