在 JavaScript 中將像素值轉(zhuǎn)換為數(shù)字值是一項(xiàng)簡單的任務(wù)，可以使用內(nèi)置函數(shù)（例如 parseInt()、parseFloat()、Number() 以及字符串方法 Replace()）來完成。每種方法都有其自身的優(yōu)點(diǎn)和缺點(diǎn)，最佳使用方法將取決于項(xiàng)目的具體要求。
在網(wǎng)頁上定位和設(shè)置項(xiàng)目樣式時，有時需要在 Web 開發(fā)中同時使用像素值和數(shù)值。例如，要對某個值執(zhí)行計(jì)算或運(yùn)算，您可能需要將像素值（例如“100px”）轉(zhuǎn)換為數(shù)字值（例如“100”）。在本文中，我們將討論使用 JavaScript 將像素值更改為整數(shù)值。
方法一：使用parseInt()方法
名為 parseInt() 的內(nèi)置 JavaScript 函數(shù)可用于將字符串轉(zhuǎn)換為整數(shù)。使用 parseInt() 方法，我們可以將字符串值轉(zhuǎn)換為整數(shù)，從字符串中刪除“px”單位，然后將整數(shù)轉(zhuǎn)換回?cái)?shù)值。
示例
<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>
登錄后復(fù)制
方法2：使用replace()方法
可以使用replace()方法將指定的值替換為另一個值，該方法是一種字符串方法。通過使用replace()方法從字符串中刪除“px”單位，我們可以將像素值更改為數(shù)字值。
示例
<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>
登錄后復(fù)制
方法3：使用parseFloat()方法
與parseInt()方法類似，parseFloat()方法將字符串轉(zhuǎn)換為浮點(diǎn)數(shù)。 parseFloat() 方法可用于將文本值從浮點(diǎn)數(shù)轉(zhuǎn)換為整數(shù)值，并且隨后可以刪除“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>
登錄后復(fù)制
方法 4：使用 Number() 構(gòu)造函數(shù)
Number() 構(gòu)造函數(shù)創(chuàng)建一個包裝傳入值的 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>
登錄后復(fù)制
為了只匹配 px 單位而不匹配任何包含 ‘px’ 序列的子字符串，在使用 Replace() 方法時使用正則表達(dá)式作為第一個參數(shù)會更安全。像這樣 –
示例
另一個重要的注意事項(xiàng)是，如果傳遞的像素值不是末尾帶有“px”的字符串，這些方法將返回 NaN（不是數(shù)字）。在代碼中添加驗(yàn)證來處理此類情況非常重要。
<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>
登錄后復(fù)制
以上就是如何使用 JavaScript 將像素值轉(zhuǎn)換為數(shù)字值？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
