首頁 > 文章 > web前端 > 如何使用 JavaScript 將像素值轉換為數字值？

如何使用 JavaScript 將像素值轉換為數字值？

PHPz轉載: 2023-09-12 10:25:06553瀏覽

如何使用 JavaScript 将像素值转换为数字值？

在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中文網其他相關文章！

JavaScript 正则表达式构造函数字符串 number 对象

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：用於計算範圍內素數的 JavaScript 程序下一篇：用於計算範圍內素數的 JavaScript 程序

看更多