5 cách để chuyển đổi dễ dàng

JavaScript được thiết kế để viết các đoạn mã ngắn chỉ vài dòng để nhúng vào các trang web. Không ai có thể đoán trước được JavaScript sẽ trở nên phổ biến như hiện nay hoặc nó được sử dụng để viết các ứng dụng với hàng nghìn dòng mã.

Dù JavaScript đã phát triển và hiện được sử dụng rộng rãi trong việc xây dựng các ứng dụng nhưng nó không phải là một ngôn ngữ hoàn hảo. Sự khởi đầu khiêm tốn và mục đích sử dụng ban đầu của nó có nghĩa là JavaScript có một số điểm kỳ quặc có thể khiến việc xây dựng các ứng dụng quy mô lớn trở thành một cơn ác mộng.

Ví dụ: JavaScript sẽ không đưa ra lỗi khi bạn tham chiếu các phần tử không tồn tại trong một đối tượng hoặc khi bạn nhân null với một giá trị số.

Đối với JavaScript, một chuỗi trống (“”) bằng 0(không) khi cả hai được so sánh bằng toán tử đẳng thức (==). Tệ hơn nữa, JavaScript sẽ không hiển thị cho bạn những lỗi như vậy trong mã của bạn trong quá trình phát triển. Bạn sẽ chỉ thấy lỗi khi thực thi chương trình của mình.

Bản đánh máy, được xây dựng dựa trên JavaScript, do đó được phát triển để giảm bớt những thách thức nảy sinh khi xây dựng ứng dụng bằng JavaScript. Để đạt được điều này, TypeScript thực hiện kiểm tra kiểu tĩnh khi bạn viết mã.

Kiểm tra tĩnh có nghĩa là phát hiện lỗi trong mã của bạn mà bạn không cần phải chạy mã. Do đó, kiểm tra kiểu tĩnh là kiểm tra lỗi trong quá trình phát triển dựa trên loại giá trị đang được vận hành trong mã.

TypeScript là một siêu tập hợp được gõ của JavaScript. Trở thành siêu tập hợp JavaScript có nghĩa là bất kỳ mã JavaScript hợp lệ nào cũng là TypeScript hợp lệ. Được gõ có nghĩa là TypeScript thêm các quy tắc về cách sử dụng các loại dữ liệu khác nhau. TypeScript cũng được gõ mạnh và bạn không thể giải quyết các hạn chế do hệ thống loại thực thi.

TypeScript là một cột mốc quan trọng và là bước phát triển đáng kể trong phát triển web. TypeScript cho phép bạn viết mã dễ đọc hơn và dễ bảo trì. Nó cũng thực thi các phương pháp viết mã tốt và giúp các nhà phát triển nắm bắt và tránh các lỗi khi viết mã.

TypeScript đáng tin cậy hơn và dễ cấu trúc lại, điều này lý tưởng cho việc xây dựng các ứng dụng quy mô lớn so với JavaScript. Với việc TypeScript được gõ mạnh, chúng ta hãy xem xét chuyển đổi kiểu, tầm quan trọng của nó và cách TypeScript xử lý chuyển đổi kiểu.

Chuyển đổi kiểu chữ trong TypeScript và tầm quan trọng của nó

Chuyển đổi kiểu là quá trình chuyển đổi một giá trị từ kiểu dữ liệu này sang kiểu dữ liệu khác, chẳng hạn như chuyển đổi một giá trị chuỗi thành một số. Chuyển đổi loại có thể được thực hiện ngầm, trong đó trình biên dịch tự động chuyển đổi các loại dữ liệu tương thích trong các biến chứng.

Chuyển đổi loại cũng có thể rõ ràng, trong đó việc chuyển đổi loại được yêu cầu rõ ràng trong mã nguồn. Điều này thường được gọi là đánh máy.

Chuyển đổi kiểu rất quan trọng vì nó cho phép các nhà phát triển làm việc với các định dạng dữ liệu khác nhau trong khi vẫn tuân thủ các kiểu dữ liệu dự kiến ​​trong TypeScript. Nó cũng giúp đảm bảo kết quả có thể dự đoán được từ mã nguồn.

Với tư cách là nhà phát triển, việc tự truyền các loại giúp bạn đảm bảo mã của bạn vẫn đáp ứng các yêu cầu về loại của TypeScript. Nó làm cho mã của bạn dễ đọc và dễ hiểu hơn, đồng thời giúp ngăn ngừa các lỗi liên quan đến loại.

Chuyển đổi loại cũng giúp hỗ trợ xác thực dữ liệu và giúp TypeScript giúp bạn phát triển bằng cách cung cấp tất cả các công cụ tích hợp sẵn, chẳng hạn như tự động hoàn thành, được liên kết với các loại cụ thể.

Trường hợp sử dụng phổ biến để chuyển đổi kiểu là với chuỗi và số. Khi chuyển đổi chuỗi thành số trong TypeScript, để tránh lỗi trong mã của bạn chỉ chuyển đổi chuỗi số thành số. Nghĩa là, bạn có thể chuyển đổi các chuỗi như “1”, “235”, “5234.5”, v.v. Tuy nhiên, không chuyển đổi các chuỗi như “hello” thành số

Chúng ta hãy xem xét các cách khác nhau để chuyển đổi chuỗi thành số trong TypeScript:

Nhập xác nhận bằng cách sử dụng ‘as’

Khi làm việc với nhiều loại dữ liệu khác nhau trong mã TypeScript, đôi khi bạn sẽ có thêm thông tin về loại giá trị mà TypeScript không thể biết. Trong những trường hợp như vậy, bạn cho TypeScript biết loại biến sẽ là gì và không để trình biên dịch suy ra loại đó. Điều này được gọi là xác nhận kiểu.

Xác nhận kiểu được thực hiện bằng cách sử dụng từ khóa as. Để sử dụng xác nhận kiểu nhằm chuyển đổi một chuỗi thành số, trước tiên hãy đặt loại chuỗi thành không xác định. Điều này là do, theo mặc định, TypeScript coi bất kỳ chuyển đổi loại chuỗi nào thành số đều có khả năng xảy ra lỗi. Điều này là do cả chuỗi và số đều không đủ trùng lặp với chuỗi kia. Để chuyển đổi một chuỗi thành một số bằng cách sử dụng as, hãy tiến hành như dưới đây:

/**
 * set the type of numString to be unkown, otherwise,
 * Typescript will infer numString to be a string value
 */
let numString: unknown = "23452";

// Type conversion using as - numString is converted to a number
// and assigned to the variable score
let score = numString as number;
console.log(score);
console.log(score * 35);

Đầu ra:

23452
820820

Từ kết quả đầu ra, hãy lưu ý rằng biến numString đã được chuyển đổi thành số và được gán cho điểm. Sau đó chúng ta có thể thực hiện các phép tính số như nhân với điểm vì giá trị của nó là một số

Nhập xác nhận bằng <>

Xác nhận kiểu bằng cách sử dụng <> cũng có thể được sử dụng để chuyển đổi một chuỗi thành số. Nó hoạt động chính xác như sử dụng từ khóa as. Sự khác biệt duy nhất trong việc triển khai là cú pháp, được hiển thị bên dưới:

let numString: unknown = "23452";
// Type assertion using <> to convert a string to a number
let score = <number>numString;

console.log(score);
console.log(score * 35);

Đầu ra:

23452
820820

Đầu ra giống như sử dụng từ khóa as. Một lần nữa, hãy nhớ không sử dụng xác nhận kiểu để chuyển đổi các chuỗi không có giá trị số trong đó.

Sử dụng hàm tạo số

Để chuyển đổi một chuỗi thành một số bằng cách sử dụng hàm tạo Số trong chuỗi bạn muốn chuyển đổi thành hàm tạo Số như trong đoạn mã bên dưới:

let numString = "23452"; // type inferred to string
let lives: string = "20"; // type annotated to string

// pass in string to Number constructor to convert to number
let score = Number(numString)
console.log(score / 17)

// pass in string to Number constructor to convert to number
let remainingLives = Number(lives);
console.log(remainingLives - 4)

Đầu ra:

1379.5294117647059
16

Khi sử dụng hàm tạo Số, bạn không phải đặt loại chuỗi thành không xác định. Nó hoạt động với các giá trị chuỗi đã được chú thích hoặc suy ra thành chuỗi. Tuy nhiên, hãy nhớ chuyển các chuỗi số như “514”. Nếu bạn chuyển vào một chuỗi không thể chuyển đổi thành số, NaN (Không phải số) sẽ được trả về.

Sử dụng toán tử cộng (+) đơn nhất

Toán tử Unary plus (+), đứng trước toán hạng đơn của nó, đánh giá toán hạng mà nó đứng trước. Ví dụ: +2 tương ứng với số 2, +542 tương ứng với số 542, v.v. Tuy nhiên, nếu toán hạng không phải là số, toán tử cộng (+) một ngôi sẽ cố gắng chuyển đổi nó thành số.

Ví dụ: +”98″ sẽ có giá trị là 98 và +”0” sẽ có giá trị là số 0. Do đó, chúng ta có thể sử dụng toán tử cộng (+) một ngôi để chuyển chuỗi thành số. Nếu bạn chuyển vào một chuỗi không thể chuyển đổi thành số, NaN sẽ được trả về như dưới đây:

let numString1 = "23452";
let numString2 = "973.82"
let word = "hello"

// Using the Unary plus (+) to convert strings to numbers
let num1 = +numString1;
let num2 = +numString2;
let notNumber = +word;

console.log(`${num1} is a ${typeof num1}`);
console.log(`${num2} is a ${typeof num2}`);
console.log(notNumber);

Đầu ra:

23452 is a number
973.82 is a number
NaN

Sử dụng toán tử cộng (+) một ngôi là một cách hay để chuyển đổi chuỗi thành số vì nó nhanh và không thực hiện bất kỳ thao tác bổ sung nào trên toán hạng của nó.

Sử dụng ParseInt() và ParsFloat()

Cũng giống như trong JavaScript, Typescript không phân biệt giữa số nguyên và số thập phân hay còn gọi là số dấu phẩy động. Tất cả đều được coi là thuộc loại số. Điều đó cho thấy, hành vi của ParseInt() và ParsFloat() hơi khác nhau một chút.

ParseInt() nhận một đối số chuỗi, phân tích nó và trả về một số nguyên tương đương theo cơ số đã chỉ định. ParseFloat() nhận vào một chuỗi và phân tích nó và trả về một số dấu phẩy động.

Ví dụ: nếu bạn chuyển “897” vào cả ParseInt() và ParspFloat(), bạn sẽ nhận lại số 897. Tuy nhiên, nếu bạn chuyển “897.75” vào cả ParseInt() và ParspFloat(), thì ParsInt() sẽ trả về 897 trong khi parsfloat() sẽ trả về 897,75.

Do đó, khi chuyển đổi các chuỗi số không có vị trí thập phân, hãy sử dụng parsInt(), tuy nhiên, nếu chuỗi số có vị trí thập phân, hãy sử dụng parsFloat() như trong mã bên dưới:

let numString1 = "897.75";
let numString2 = "724";
let word = "hello";

console.log("Parsing numerical strings with decimal numbers")
console.log(`Using parseInt -> ${parseInt(numString1)}`);
console.log(`Using parseFloat -> ${parseFloat(numString1)}`);

console.log("Parsing numerical strings with whole numbers")
console.log(`Using parseInt -> ${parseInt(numString2)}`);
console.log(`Using parseFloat -> ${parseFloat(numString2)}`);

console.log("Parsing strings that can't convert to number")
console.log(parseInt(word));
console.log(parseFloat(word));

Đầu ra:

Parsing numerical strings with decimal numbers
Using parseInt -> 897
Using parseFloat -> 897.75
Parsing numerical strings with whole numbers
Using parseInt -> 724
Using parseFloat -> 724
Parsing strings that can't convert to number
NaN
NaN

Phần kết luận

Khi làm việc với các giá trị chuỗi, chẳng hạn như kết quả của lệnh gọi API, bạn có thể muốn chuyển đổi chúng thành số để có thể thực hiện các phép tính số trên chúng. Khi có nhu cầu như vậy, hãy xem xét các phương pháp được nêu trong bài viết để chuyển đổi chuỗi thành số.

Tuy nhiên, bất cứ khi nào bạn chuyển đổi chuỗi thành số, hãy cẩn thận vì bạn có thể nhận được NaN khi cố gắng chuyển đổi chuỗi thành số.

Để tránh lỗi như vậy, hãy đảm bảo tất cả các chuỗi bạn muốn chuyển đổi thành số đều là chuỗi số. Bạn cũng có thể sử dụng câu lệnh if để kiểm tra NaN nhằm tránh lỗi trong mã của mình.

Bạn cũng có thể khám phá các thư viện và thời gian chạy TypeScript hàng đầu để biết với tư cách là nhà phát triển.