在 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 將像素值轉換為數字值？的詳細內容，更多請關注www.92cms.cn其它相關文章！
