在JavaScript 中將像素值轉換為數字值是一項簡單的任務，可以使用內建函數（例如parseInt()、parseFloat()、Number() 以及字串方法Replace()）來完成。每種方法都有其自身的優點和缺點，最佳使用方法將取決於專案的特定要求。
在網頁上定位和設定專案樣式時，有時需要在 Web 開發中同時使用像素值和數值。例如，要對某個值執行計算或運算，您可能需要將像素值（例如“100px”）轉換為數字值（例如“100”）。在本文中，我們將討論使用 JavaScript 將像素值變更為整數值。
方法一：使用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>
登入後複製
以上是如何使用 JavaScript 將像素值轉換為數字值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
