Проверка строки на алфавитно-цифровой состав

JavaScriptJavaScriptBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом лабораторном занятии мы научимся проверять, содержит ли строка только алфавитно-цифровые символы с использованием JavaScript. Алфавитно-цифровые символы включают буквы (A-Z, a-z) и цифры (0-9). Это распространенная задача при валидации форм, обработке данных и во многих других сценариях программирования.

Мы создадим функцию JavaScript, которая использует регулярные выражения (regular expressions), чтобы определить, является ли строка алфавитно-цифровой. К концу этого лабораторного занятия вы поймете, как реализовать такую проверку и как регулярные выражения можно использовать для валидации шаблонов строк в JavaScript.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/logic_ops("Logical Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/BasicConceptsGroup -.-> javascript/str_manip("String Manipulation") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") subgraph Lab Skills javascript/logic_ops -.-> lab-28407{{"Проверка строки на алфавитно-цифровой состав"}} javascript/cond_stmts -.-> lab-28407{{"Проверка строки на алфавитно-цифровой состав"}} javascript/functions -.-> lab-28407{{"Проверка строки на алфавитно-цифровой состав"}} javascript/str_manip -.-> lab-28407{{"Проверка строки на алфавитно-цифровой состав"}} javascript/array_methods -.-> lab-28407{{"Проверка строки на алфавитно-цифровой состав"}} end

Понимание алфавитно-цифровых символов

Алфавитно-цифровые символы состоят из 26 букв английского алфавита (как заглавных A-Z, так и строчных a-z) и 10 цифр (0-9). Когда мы проверяем, является ли строка алфавитно-цифровой, мы проверяем, что она содержит только эти символы и ничего больше.

В JavaScript мы можем проверять на наличие алфавитно-цифровых символов с использованием регулярных выражений (regular expressions). Регулярные выражения (regex) - это шаблоны, используемые для сопоставления комбинаций символов в строках.

Давайте начнем с открытия нашего редактора кода. В WebIDE перейдите к проводнику файлов слева и создайте новый JavaScript-файл:

  1. Щелкните правой кнопкой мыши в панели проводника файлов.
  2. Выберите "New File".
  3. Назовите файл alphanumeric.js.

После создания файла он должен автоматически открыться в редакторе. Если это не произошло, кликните на alphanumeric.js в проводнике файлов, чтобы открыть его.

new-file

Теперь введите следующий код:

// Function to check if a string is alphanumeric
function isAlphaNumeric(str) {
  // Using regular expression to check for alphanumeric characters
  return /^[a-zA-Z0-9]+$/.test(str);
}

// Example usage
console.log("Is 'hello123' alphanumeric?", isAlphaNumeric("hello123"));
console.log("Is '123' alphanumeric?", isAlphaNumeric("123"));
console.log("Is 'hello 123' alphanumeric?", isAlphaNumeric("hello 123"));
console.log("Is 'hello@123' alphanumeric?", isAlphaNumeric("hello@123"));

Сохраните файл, нажав Ctrl+S или выбрав "File" > "Save" в меню.

Теперь запустим этот JavaScript-файл, чтобы увидеть результат. Откройте терминал в WebIDE, выбрав "Terminal" > "New Terminal" в меню или нажав Ctrl+`.

В терминале выполните следующую команду:

node alphanumeric.js

Вы должны увидеть следующий вывод:

Is 'hello123' alphanumeric? true
Is '123' alphanumeric? true
Is 'hello 123' alphanumeric? false
Is 'hello@123' alphanumeric? false

Этот вывод показывает, что наша функция правильно определяет hello123 и 123 как алфавитно-цифровые строки, в то время как hello 123 (содержит пробел) и hello@123 (содержит специальный символ @) не являются алфавитно-цифровыми.

Понимание регулярных выражений

Теперь давайте рассмотрим регулярное выражение, которое мы использовали в нашей функции:

/^[a-zA-Z0-9]+$/;

Этот шаблон может показаться сложным, но мы можем разбить его на части:

  1. / - Косые черты обозначают начало и конец шаблона регулярного выражения.
  2. ^ - Этот символ означает "начало строки".
  3. [a-zA-Z0-9] - Это класс символов, который соответствует:
    • a-z: любой строчной символ от 'a' до 'z'
    • A-Z: любой заглавный символ от 'A' до 'Z'
    • 0-9: любая цифра от '0' до '9'
  4. + - Этот квантификатор означает "один или более" предыдущего элемента.
  5. $ - Этот символ означает "конец строки".

Таким образом, полный шаблон проверяет, содержит ли строка только алфавитно-цифровые символы от начала до конца.

Давайте модифицируем нашу функцию, чтобы сделать ее более гибкой. Откройте файл alphanumeric.js еще раз и обновите его следующим кодом:

// Function to check if a string is alphanumeric
function isAlphaNumeric(str) {
  return /^[a-zA-Z0-9]+$/.test(str);
}

// Alternative function using case-insensitive flag
function isAlphaNumericAlt(str) {
  return /^[a-z0-9]+$/i.test(str);
}

// Example usage
console.log("Using first function:");
console.log("Is 'Hello123' alphanumeric?", isAlphaNumeric("Hello123"));
console.log("Is 'HELLO123' alphanumeric?", isAlphaNumeric("HELLO123"));

console.log("\nUsing alternative function with case-insensitive flag:");
console.log("Is 'Hello123' alphanumeric?", isAlphaNumericAlt("Hello123"));
console.log("Is 'HELLO123' alphanumeric?", isAlphaNumericAlt("HELLO123"));

Сохраните файл и запустите его снова с помощью команды:

node alphanumeric.js

Вы должны увидеть следующий вывод:

Using first function:
Is 'Hello123' alphanumeric? true
Is 'HELLO123' alphanumeric? true

Using alternative function with case-insensitive flag:
Is 'Hello123' alphanumeric? true
Is 'HELLO123' alphanumeric? true

Альтернативная функция использует флаг i в конце регулярного выражения, который делает сопоставление шаблона регистронезависимым. Это означает, что нам нужно включить только a-z в наш класс символов, и он автоматически будет соответствовать и заглавным буквам.

Создание простого инструмента валидации

Теперь, когда мы понимаем функцию проверки на алфавитно-цифровые символы, давайте создадим простой интерактивный инструмент валидации. Мы будем использовать встроенный модуль readline в Node.js для получения ввода от пользователя из терминала.

Создайте новый файл с именем validator.js в той же директории:

  1. Щелкните правой кнопкой мыши в панели проводника файлов.
  2. Выберите "New File".
  3. Назовите файл validator.js.

Добавьте следующий код в файл:

const readline = require("readline");

// Create a readline interface for user input
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

// Function to check if a string is alphanumeric
function isAlphaNumeric(str) {
  return /^[a-zA-Z0-9]+$/.test(str);
}

// Function to check the input
function checkInput(input) {
  if (isAlphaNumeric(input)) {
    console.log(`"${input}" is alphanumeric.`);
  } else {
    console.log(`"${input}" is NOT alphanumeric.`);
    console.log(
      "Alphanumeric strings contain only letters (A-Z, a-z) and numbers (0-9)."
    );
  }

  // Ask if the user wants to check another string
  rl.question("\nDo you want to check another string? (yes/no): ", (answer) => {
    if (answer.toLowerCase() === "yes" || answer.toLowerCase() === "y") {
      askForInput();
    } else {
      console.log("Thank you for using the alphanumeric validator!");
      rl.close();
    }
  });
}

// Function to ask for input
function askForInput() {
  rl.question("Enter a string to check if it is alphanumeric: ", (input) => {
    checkInput(input);
  });
}

// Welcome message
console.log("=== Alphanumeric String Validator ===");
console.log(
  "This tool checks if a string contains only alphanumeric characters (A-Z, a-z, 0-9).\n"
);

// Start the program
askForInput();

Сохраните файл и запустите его с помощью команды:

node validator.js

Вы увидите приветственное сообщение и приглашение ввести строку. Попробуйте ввести разные строки, например:

  • hello123 (алфавитно-цифровая)
  • Hello World (не является алфавитно-цифровой из-за пробела)
  • hello@123 (не является алфавитно-цифровой из-за символа @)

Для каждого ввода программа сообщит, является ли строка алфавитно-цифровой, и спросит, хотите ли вы проверить другую строку. Введите yes или y для продолжения, или любое другое значение для выхода из программы.

Этот интерактивный инструмент демонстрирует, как наша функция валидации на алфавитно-цифровые символы может быть использована в практическом приложении.

Исследование других способов проверки алфавитно-цифровых строк

Кроме использования регулярных выражений, существуют и другие методы проверки, является ли строка алфавитно-цифровой. Давайте рассмотрим некоторые из них, создав новый файл с именем alternative-methods.js:

  1. Щелкните правой кнопкой мыши в панели проводника файлов.
  2. Выберите "New File".
  3. Назовите файл alternative-methods.js.

Добавьте следующий код в файл:

// Method 1: Using regular expression (our original method)
function isAlphaNumericRegex(str) {
  return /^[a-zA-Z0-9]+$/.test(str);
}

// Method 2: Using Array.every() and checking each character
function isAlphaNumericEvery(str) {
  // If string is empty, return false
  if (str.length === 0) return false;

  return [...str].every((char) => {
    const code = char.charCodeAt(0);
    // Check if character is a digit (0-9)
    const isDigit = code >= 48 && code <= 57;
    // Check if character is a lowercase letter (a-z)
    const isLowercase = code >= 97 && code <= 122;
    // Check if character is an uppercase letter (A-Z)
    const isUppercase = code >= 65 && code <= 90;

    return isDigit || isLowercase || isUppercase;
  });
}

// Method 3: Using a combination of match() and length
function isAlphaNumericMatch(str) {
  // If string is empty, return false
  if (str.length === 0) return false;

  // Remove all alphanumeric characters and check if anything remains
  const nonAlphaNumeric = str.match(/[^a-zA-Z0-9]/g);
  return nonAlphaNumeric === null;
}

// Test strings
const testStrings = [
  "hello123",
  "HELLO123",
  "hello 123",
  "hello@123",
  "",
  "0123456789",
  "abcdefghijklmnopqrstuvwxyz"
];

// Test each method with each string
console.log("=== Testing Different Methods ===");
console.log("String\t\t\tRegex\tEvery\tMatch");
console.log("---------------------------------------------");

testStrings.forEach((str) => {
  const displayStr = str.length > 10 ? str.substring(0, 10) + "..." : str;
  const paddedStr = displayStr.padEnd(16, " ");

  const regexResult = isAlphaNumericRegex(str);
  const everyResult = isAlphaNumericEvery(str);
  const matchResult = isAlphaNumericMatch(str);

  console.log(`"${paddedStr}"\t${regexResult}\t${everyResult}\t${matchResult}`);
});

console.log("\nPerformance Comparison:");
const iterations = 1000000;
const testString = "hello123ABCxyz45";

console.time("Regex Method");
for (let i = 0; i < iterations; i++) {
  isAlphaNumericRegex(testString);
}
console.timeEnd("Regex Method");

console.time("Every Method");
for (let i = 0; i < iterations; i++) {
  isAlphaNumericEvery(testString);
}
console.timeEnd("Every Method");

console.time("Match Method");
for (let i = 0; i < iterations; i++) {
  isAlphaNumericMatch(testString);
}
console.timeEnd("Match Method");

Сохраните файл и запустите его с помощью команды:

node alternative-methods.js

Вывод показывает, как каждый метод работает с разными тестовыми строками, а также сравнение производительности между методами. Метод с использованием регулярного выражения обычно является наиболее лаконичным и часто самым быстрым, но полезно знать и альтернативные подходы.

Рассмотрим каждый метод:

  1. isAlphaNumericRegex: Использует регулярное выражение для сопоставления только алфавитно-цифровых символов.
  2. isAlphaNumericEvery: Проверяет ASCII-код каждого символа, чтобы определить, является ли он алфавитно-цифровым.
  3. isAlphaNumericMatch: Удаляет все алфавитно-цифровые символы и проверяет, осталось ли что-то.

Понимание разных подходов дает вам гибкость при решении программистских задач. Регулярные выражения мощны, но иногда могут быть трудно читаемы. Другие методы могут быть более интуитивно понятными для некоторых программистов, особенно для тех, кто не знаком с шаблонами регулярных выражений.

Резюме

В этом практическом занятии (лабораторной работе) мы изучили, как проверить, содержит ли строка только алфавитно-цифровые символы в JavaScript. Мы узнали несколько важных концепций:

  1. Что такое алфавитно-цифровые символы (буквы от A до Z, от a до z и цифры от 0 до 9)
  2. Как использовать регулярные выражения для валидации шаблонов строк
  3. Анализ и понимание шаблонов регулярных выражений, таких как /^[a-zA-Z0-9]+$/
  4. Создание интерактивного инструмента валидации с использованием Node.js
  5. Исследование альтернативных методов проверки алфавитно-цифровых строк

Возможность валидации содержимого строк является фундаментальным навыком в программировании, полезным для:

  • Валидации форм в веб-приложениях
  • Очистки и обработки данных
  • Безопасных проверок для предотвращения атак с использованием инъекций
  • Валидации имен файлов или ввода пользователя

Вы можете расширить свои знания, сделав следующее:

  • Добавив больше правил валидации (например, минимальную длину, требования к специальным символам)
  • Создав более полноценную библиотеку валидации
  • Интегрировав эти функции валидации в веб-приложение

Подход с использованием регулярных выражений, который мы применили, лаконичен и эффективен, но помните, что знание альтернативных методов дает вам больше инструментов в вашем программистском арсенале.