Bagaimana untuk menukar nilai piksel kepada nilai angka menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menukar nilai piksel kepada nilai angka menggunakan JavaScript?

PHPz

Lepaskan： 2023-09-12 10:25:06

ke hadapan

607 orang telah melayarinya

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

Menukar nilai piksel kepada nilai angka dalam JavaScript adalah tugas yang mudah dan boleh dilakukan menggunakan fungsi terbina dalam seperti parseInt(), parseFloat(), Number(), dan kaedah rentetan Replace() . Setiap kaedah mempunyai kelebihan dan kekurangannya sendiri, dan kaedah terbaik untuk digunakan bergantung pada keperluan khusus projek.

Kadangkala perlu menggunakan kedua-dua nilai piksel dan nilai berangka dalam pembangunan web apabila meletakkan dan menggayakan item pada halaman web. Contohnya, untuk melakukan pengiraan atau operasi pada nilai, anda mungkin perlu menukar nilai piksel (seperti "100px") kepada nilai berangka (seperti "100"). Dalam artikel ini, kita akan membincangkan menukar nilai piksel kepada nilai integer menggunakan JavaScript.

Kaedah 1: Gunakan kaedah parseInt()

Fungsi JavaScript terbina dalam dipanggil parseInt() boleh digunakan untuk menukar rentetan kepada integer. Menggunakan kaedah parseInt(), kita boleh menukar nilai rentetan kepada integer, mengalih keluar unit "px" daripada rentetan dan kemudian menukar integer kembali kepada nilai berangka.

Contoh

<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>

Salin selepas log masuk

Kaedah 2: Gunakan kaedah replace()

Anda boleh menggantikan nilai yang ditentukan dengan nilai lain menggunakan kaedah replace(), iaitu kaedah rentetan. Kita boleh menukar nilai piksel kepada nilai angka dengan mengalih keluar unit "px" daripada rentetan menggunakan kaedah replace().

Contoh

<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>

Salin selepas log masuk

Kaedah 3: Gunakan kaedah parseFloat()

Sama seperti kaedah parseInt(), kaedah parseFloat() menukar rentetan kepada nombor titik terapung. Kaedah parseFloat() boleh digunakan untuk menukar nilai teks daripada apungan kepada nilai integer, dan unit "px" boleh dialih keluar.

Contoh

<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>

Salin selepas log masuk

Kaedah 4: Gunakan pembina Number()

Pembina Number() mencipta objek Number yang membalut nilai yang diluluskan.

Contoh

<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>

Salin selepas log masuk

Untuk memadankan hanya unit px dan bukan mana-mana subrentetan yang mengandungi jujukan 'px', adalah lebih selamat untuk menggunakan ungkapan biasa sebagai hujah pertama apabila menggunakan kaedah Replace(). Macam ni -

Contoh

Satu lagi nota penting ialah kaedah ini akan mengembalikan NaN (bukan nombor) jika nilai piksel yang diluluskan bukan rentetan dengan "px" di hujungnya. Adalah penting untuk menambah pengesahan dalam kod anda untuk mengendalikan situasi seperti ini.

<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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menukar nilai piksel kepada nilai angka menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!