Tồn tại một phương thức đối tượng Number trong JavaScript cho phép chúng tôi đặt một dấu thập phân cố định trên một số và sau đó trả về nó dưới dạng một chuỗi. Bài viết này sẽ nói về cú pháp của phương thức này và minh họa cách sử dụng nó.
Khi chúng ta nói về nguyên thủy trong JavaScript, chúng ta đang nói về các mục không phải là Đối tượng và không có bất kỳ phương thức nào liên kết với chúng. Khi chúng ta muốn lấy một giá trị nguyên thủy và biến nó thành một đối tượng, chúng ta có thể làm điều đó với các trình bao bọc nguyên thủy có thể xoay quanh giá trị hoặc kiểu dữ liệu.
Các số có một đối tượng trình bao bọc nguyên thủy. Chúng tôi sử dụng nó để chuyển các biểu diễn chuỗi của một số thành một đối tượng Number thực tế có các phương thức mà chúng tôi có thể thực hiện trên nó.
Ví dụ:chúng ta có một biểu diễn chuỗi của một số vì chúng ta có một biểu mẫu yêu cầu người dùng chèn một giá trị số cho một trường trên màn hình. Chúng ta có thể lấy đầu vào đó, biến nó thành Số, rồi sử dụng bất kỳ phương thức nào để làm việc với giá trị đó.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form onsubmit=handleSubmit(event)>
<label for="to-fixed">Enter a number:</label>
<input id="to-fixed" onchange=handleChange(event) type="text" name="inputVal" value=""/>
<label for="num-digits">Num places:</label>
<input id="num-digits" onchange=handleChange(event) type="text" name="numVal" value=""/>
<input type="submit" value="Submit" />
</form>
<h3 id="root"></h3>
<script>
let inputVal = '';
let numVal = '';
const handleChange = e => {
if(e.target.name === "inputVal") {
inputVal = e.target.value;
} else {
numVal = e.target.value;
}
console.log(e.currentTarget, e.target)
}
const handleSubmit = e => {
e.preventDefault();
console.log(e)
const root = document.querySelector("#root");
root.innerHTML = Number(inputVal).toFixed(Number(numVal));
console.log(Number(inputVal).toFixed(5))
}
const inputValue = document.getElementById("to-fixed").value
</script>
</body>
</html>
Ở đây, chúng tôi đã sử dụng phương thức Number object’s toFixed () để làm cho số có độ dài mà chúng tôi muốn. Cú pháp của phương thức như sau:
const toFixedNumDigits = Number([x]).toFixed(Number([y]));
Nếu xử lý các biểu mẫu, có một điều bạn phải nhớ:các giá trị này có dạng chuỗi. Vì vậy, để sử dụng toFixed() trên chúng, bạn phải biến chúng thành biểu diễn Số.
Chúng tôi làm điều đó ở đây bằng cách đóng gói các đầu vào bằng trình bao bọc Number (n). Biến đầu tiên, x, là số dấu phẩy động mà bạn muốn rút ngắn (hoặc kéo dài tùy trường hợp). Biến thứ hai, y, là số vị trí bạn muốn số đó vượt qua dấu thập phân.
Hãy tự mình thử một vài con số sau để xem bạn nhận lại được gì trong trình chỉnh sửa mã:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Enter a number: Num places: //floats 45.45678 3 // Returns '45.457' //integers 45 5 // Returns '45.00000' //exponential notation 1e-10 3 // Returns '0.00' 1.23e+20 2 // Returns '123000000000000000000.00' 1.23e-10 2 // Returns '0.00'
Như bạn có thể thấy số lượng chữ số điều chỉnh dựa trên biến y mà bạn đã cắm vào đầu vào Số địa điểm. Nếu số không đủ dài để bù cho giá trị Num Địa điểm, nó sẽ chèn chuỗi bằng các số không cho đến khi đạt đến độ dài mong muốn.
Nếu số dài và đầu vào Số địa điểm ngắn hơn các chữ số khả dụng mà bạn có sau dấu thập phân, nó sẽ rút ngắn số và làm tròn số ở cuối để trả về biểu diễn chuỗi mong muốn của số.
Xin lưu ý :Nếu bạn muốn làm việc với nó như một số trong logic của bạn sau khi nó đã được thao tác và trả về, bạn sẽ phải chuyển nó trở lại thành một số bằng cách sử dụng trình bao bọc nguyên thủy Number như chúng ta đã làm ở trên.
Học gì tiếp theo?
Số ngẫu nhiên JavaScript:Hướng dẫn đầy đủ
JavaScript ParseInt:Hướng dẫn từng bước
Bộ hẹn giờ đếm ngược JavaScript:Hướng dẫn
Chuỗi JavaScript
JavaScript toUpperCase và toLowerCase