資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 將畫素值轉換為數值？
在 JavaScript 中將畫素值轉換為數值是一項簡單的任務，可以使用內建函式（如 parseInt()、parseFloat()、Number()）以及字串方法 replace() 來完成。每種方法都有其自身的優缺點，最佳使用方法將取決於專案的具體需求。
在網頁上定位和設定專案樣式時，有時需要在網頁開發中同時使用畫素值和數值。例如，要對值執行計算或運算，您可能需要將畫素值（例如“100px”）轉換為數值（例如“100”）。在本文中，我們將討論使用 JavaScript 將畫素值轉換為整數。
方法 1：使用 parseInt() 方法
可以使用名為 parseInt() 的內建 JavaScript 函式將字串轉換為整數。使用 parseInt() 方法，我們可以將字串值轉換為整數，從字串中刪除“px”單位，然後將整數轉換回數值。
示例
<html>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
let pixelValue = "100px";
document.getElementById("result1").innerHTML = "Pixel value: " + pixelValue ;
let numberValue = parseInt(pixelValue);
document.getElementById("result2").innerHTML = "Number value: " + numberValue;
</script>
</body>
</html>
方法 2：使用 replace() 方法
replace() 方法是字串方法，可用於將宣告的值替換為另一個值。透過使用 replace() 方法從字串中刪除“px”單位，我們可以將畫素值轉換為數值。
示例
<html>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
let pixelValue = "100px";
document.getElementById("result1").innerHTML = "Pixel value: " + pixelValue ;
let numberValue = parseInt(pixelValue.replace("px", ""));
document.getElementById("result2").innerHTML = "Number value: " + numberValue;
</script>
</body>
</html>
方法 3：使用 parseFloat() 方法
與 parseInt() 方法類似，parseFloat() 方法將字串轉換為浮點數。可以使用 parseFloat() 方法將浮點數的文字值轉換為整數，然後可以刪除“px”單位。
示例
<html>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
let pixelValue = "100.5px";
document.getElementById("result1").innerHTML = "Pixel value: " + pixelValue ;
let numberValue = parseFloat(pixelValue.replace("px", ""));
document.getElementById("result2").innerHTML = "Number value: " + numberValue;
</script>
</body>
</html>
方法 4：使用 Number() 建構函式
Number() 建構函式建立一個包裝傳入值的 Number 物件。
示例
<html>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
let pixelValue = "100px";
document.getElementById("result1").innerHTML = "Pixel value: " + pixelValue ;
let numberValue = Number(pixelValue.replace("px", ""));
document.getElementById("result2").innerHTML = "Number value: " + numberValue;
</script>
</body>
</html>
為了僅匹配 px 單位而不是包含 'px' 序列的任何子字串，在使用 replace() 方法時，使用正則表示式作為第一個引數更安全。例如：
示例
另一個重要說明是，如果傳遞的畫素值不是以“px”結尾的字串，則這些方法將返回 NaN（非數字）。在程式碼中新增驗證以處理此類情況非常重要。
<html>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
let pixelValue = "100px";
document.getElementById("result1").innerHTML = "Pixel value: " + pixelValue ;
let numberValue = parseInt(pixelValue.replace(/px/g, ""));
document.getElementById("result2").innerHTML = "Number value: " + numberValue;
</script>
</body>
</html>
更新於： 2023 年 3 月 2 日
4K+ 閱讀量
廣告