Comparación de Cadenas en JavaScript: Ejemplo Práctico

 Comparación de Cadenas en JavaScript: Ejemplo Práctico

En JavaScript, comparar cadenas de texto es una tarea común. Veamos un ejemplo donde se valida si un nombre ingresado por el usuario coincide con una cadena específica ("Victoria").

Código HTML/JS:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comparación de Cadenas</title>
</head>
<body>
    <h1>Introducir Nombre</h1>
    <form id="nameForm">
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" required>
        <button type="submit">Enviar</button>
    </form>
    <p id="mensaje"></p>

    <script>
        const form = document.getElementById('nameForm');

        form.addEventListener('submit', function(event) {
            event.preventDefault(); // Evita recargar la página
            
            const nombre = document.getElementById('nombre').value;

            // Comparación estricta (===)
            if (nombre === "Victoria") {
                document.getElementById('mensaje').textContent = "¡Hola Victoria!";
            } else {
                document.getElementById('mensaje').textContent = "Nombre no reconocido.";
            }
        });
    </script>
</body>
</html>

¿Qué hace este código?

  1. Captura el nombre ingresado por el usuario en un formulario.

  2. Compara la cadena con "Victoria" usando el operador === (comparación estricta).

  3. Muestra un mensaje personalizado si coincide, o un mensaje genérico si no.

Detalles clave:

✔ === vs ==:

  • === compara valor y tipo de dato (recomendado).

  • == solo compara el valor (puede dar resultados inesperados).

✔ Case-sensitive:

  • "victoria" no es igual a "Victoria" (diferencia mayúsculas/minúsculas).

✔ Prevención de recarga:

  • event.preventDefault() evita que el formulario recargue la página.

¿Has usado comparaciones de cadenas en tus proyectos? ¡Comenta tu experiencia! 🚀

Comentarios

Entradas más populares de este blog

1-valores duplicados en un arreglo

Pseudocódigo de la Máquina Expendedora

Trabajas en una compañía que ofrece seguros de vida y de gastos