Heim > Artikel > Web-Frontend > Wie konvertiere ich Pixelwerte mit JavaScript in numerische Werte?

Wie konvertiere ich Pixelwerte mit JavaScript in numerische Werte?

PHPznach vorne: 2023-09-12 10:25:06553Durchsuche

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

Das Konvertieren von Pixelwerten in numerische Werte in JavaScript ist eine einfache Aufgabe und kann mit integrierten Funktionen wie parseInt(), parseFloat(), Number() und der String-Methode Replacement() durchgeführt werden. Jede Methode hat ihre eigenen Vor- und Nachteile und die beste Methode hängt von den spezifischen Anforderungen des Projekts ab.

Manchmal ist es in der Webentwicklung erforderlich, sowohl Pixelwerte als auch numerische Werte zu verwenden, wenn Elemente auf einer Webseite positioniert und gestaltet werden. Um beispielsweise eine Berechnung oder Operation für einen Wert durchzuführen, müssen Sie möglicherweise einen Pixelwert (z. B. „100 Pixel“) in einen numerischen Wert (z. B. „100“) konvertieren. In diesem Artikel besprechen wir die Änderung von Pixelwerten in Ganzzahlwerte mithilfe von JavaScript.

Methode 1: Verwenden Sie die parseInt()-Methode

Eine integrierte JavaScript-Funktion namens parseInt() kann zum Konvertieren von Zeichenfolgen in Ganzzahlen verwendet werden. Mit der Methode parseInt() können wir den String-Wert in eine Ganzzahl umwandeln, die „px“-Einheit aus der Zeichenfolge entfernen und die Ganzzahl dann wieder in einen numerischen Wert umwandeln.

Beispiel

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

Methode 2: Verwenden Sie die Methode replace()

Sie können den angegebenen Wert mit der Methode replace(), einer String-Methode, durch einen anderen Wert ersetzen. Wir können den Pixelwert in einen numerischen Wert ändern, indem wir die Einheit „px“ mit der Methode replace() aus der Zeichenfolge entfernen.

Beispiel

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

Methode 3: Verwenden Sie die parseFloat()-Methode

Ähnlich wie die Methode parseInt() konvertiert die Methode parseFloat() einen String in eine Gleitkommazahl. Mit der Methode parseFloat() lässt sich ein Textwert von einem Float-Wert in einen Integer-Wert umwandeln und anschließend können die „px“-Einheiten entfernt werden.

Beispiel

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

Methode 4: Verwenden Sie den Number()-Konstruktor

Der Number()-Konstruktor erstellt ein Number-Objekt, das den übergebenen Wert umschließt.

Beispiel

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

Um nur px-Einheiten abzugleichen und keinen Teilstring, der die „px“-Sequenz enthält, ist es sicherer, einen regulären Ausdruck als erstes Argument zu verwenden, wenn Sie die Methode „Replace()“ verwenden. So -

Beispiel

Ein weiterer wichtiger Hinweis ist, dass diese Methoden NaN (keine Zahl) zurückgeben, wenn der übergebene Pixelwert keine Zeichenfolge mit „px“ am Ende ist. Es ist wichtig, Ihrem Code eine Validierung hinzuzufügen, um Situationen wie diese zu bewältigen.

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

Das obige ist der detaillierte Inhalt vonWie konvertiere ich Pixelwerte mit JavaScript in numerische Werte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：JavaScript-Programm zum Zählen von Primzahlen in einem BereichNächster Artikel：JavaScript-Programm zum Zählen von Primzahlen in einem Bereich

In Verbindung stehende Artikel

Mehr sehen