Comment convertir les valeurs de pixels en valeurs numériques à l'aide de JavaScript ?-js tutoriel-php.cn

Comment convertir les valeurs de pixels en valeurs numériques à l'aide de JavaScript ?

PHPz

Libérer： 2023-09-12 10:25:06

avant

575 Les gens l'ont consulté

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

La conversion des valeurs de pixels en valeurs numériques en JavaScript est une tâche simple et peut être effectuée à l'aide de fonctions intégrées telles que parseInt(), parseFloat(), Number() et la méthode de chaîne Replace(). Chaque méthode a ses propres avantages et inconvénients, et la meilleure méthode à utiliser dépendra des exigences spécifiques du projet.

Il est parfois nécessaire d'utiliser à la fois des valeurs de pixels et des valeurs numériques dans le développement Web lors du positionnement et du style des éléments sur une page Web. Par exemple, pour effectuer un calcul ou une opération sur une valeur, vous devrez peut-être convertir une valeur de pixel (telle que « 100px ») en une valeur numérique (telle que « 100 »). Dans cet article, nous discuterons de la modification des valeurs de pixels en valeurs entières à l'aide de JavaScript.

Méthode 1 : utilisez la méthode parseInt()

Une fonction JavaScript intégrée appelée parseInt() peut être utilisée pour convertir des chaînes en entiers. En utilisant la méthode parseInt(), nous pouvons convertir la valeur de chaîne en entier, supprimer l'unité « px » de la chaîne, puis reconvertir l'entier en valeur numérique.

Exemple

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

Copier après la connexion

Méthode 2 : utilisez la méthode replace()

Vous pouvez remplacer la valeur spécifiée par une autre valeur à l'aide de la méthode replace(), qui est une méthode de chaîne. Nous pouvons changer la valeur du pixel en valeur numérique en supprimant l'unité "px" de la chaîne à l'aide de la méthode replace().

Exemple

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

Copier après la connexion

Méthode 3 : utilisez la méthode parseFloat()

Semblable à la méthode parseInt(), la méthode parseFloat() convertit une chaîne en nombre à virgule flottante. La méthode parseFloat() peut être utilisée pour convertir une valeur texte d'un flottant en une valeur entière, et les unités « px » peuvent ensuite être supprimées.

Exemple

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

Copier après la connexion

Méthode 4 : Utiliser le constructeur Number()

Le constructeur Number() crée un objet Number qui encapsule la valeur transmise.

Exemple

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

Copier après la connexion

Pour faire correspondre uniquement les unités px et non aucune sous-chaîne contenant la séquence « px », il est plus sûr d'utiliser une expression régulière comme premier argument lors de l'utilisation de la méthode Replace(). Comme ça -

Exemple

Une autre remarque importante est que ces méthodes renverront NaN (pas un nombre) si la valeur de pixel transmise n'est pas une chaîne avec "px" à la fin. Il est important d'ajouter une validation dans votre code pour gérer des situations comme celle-ci.

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!