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.
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.
<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>
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.
<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>
Ä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.
<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>
Der Number()-Konstruktor erstellt ein Number-Objekt, das den übergebenen Wert umschließt.
<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 -
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!
