Как извлечь число из строки в JavaScript: replace и alert

Быстрый ответ

Для поиска цифр в строке примените метод match() с регулярным выражением /\d+/. Для преобразования результата используйте функцию parseInt():

let num = "Item 123".match(/\d+/); // Ищем цифры!
let result = num ? parseInt(num[0], 10) : null; // Преобразовываем либо возвращаем null.

В переменной num хранится найденная последовательность цифр; result возвращает число или null, если цифры не обнаружены.

Глубже в мир регулярных выражений

Все пути приводят к числам

Для того чтобы извлечь все числа из строки, действуйте следующим образом:

let nums = "Item 123, Item 456".match(/\d+/g); // Собираем всех!
let results = nums ? nums.map(n => parseInt(n, 10)) : []; // Преобразовываем!

nums превращается в массив найденных чисел, которые преобразуются в целые числа с помощью map().

Подробнее об этом расскажет наш спикер на видео

Сохраняем группы цифр вместе

Если нужно сохранить последовательности цифр как единые числа:

let numStr = "Winning numbers: 42, 007, 1234".match(/\d+/g).join(''); // Склеиваем воедино!
let result = parseInt(numStr, 10); // И сразу в действие!

После того, как match() обнаружит цифры, join('') объединяет их в единую строку для дальнейшего преобразования с помощью parseInt().

Глубокая очистка для смешанных строк

При наличии в строке разнородного контента потребуется детальный подход:

let purifiedNum = "Amount: $123.45".replace(/^\D+/g, '').replace(/[^0-9]/g, ''); // Избавляемся от лишних символов!
let result = parseInt(purifiedNum, 10); // Теперь всё кристально чисто.

Первый replace() удаляет нецифровые символы в начале строки, второй — все лишние символы, оставляя "12345" готовым к применению parseInt().

Адаптируемся к различным форматам строк

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

const genRegex = (pattern) => new RegExp(pattern, 'g'); // Создатели регулярных выражений на свой вкус
let num = "ID: 00123".match(genRegex("\\d+")); // Искатели сокровищ!
let result = num ? num.map(n => parseInt(n, 10)) : []; // Найдено!

Полезные советы

Использование parseInt профессиональным образом

Всегда указывайте разрядность числа в parseInt(), чтобы избежать ошибок, в частности, если обрабатываемая строка начинается с "0":

let result = parseInt("07", 10); // Запрещено для применения.

Работа с десятичными числами

Для работы с десятичными числами выберите parseFloat() и соответствующее регулярное выражение:

let num = "Price: $123.99".match(/[\d\.]+/); // Готовимся к действию!
let result = num ? parseFloat(num[0]) : null; // И вперёд!

Бдительность при использовании match()

Если match() не обнаруживает цифр, он возвращает null. Учтите это:

let str = "Здесь нет цифр!"; // Момент напряжения…
let result = str.match(/\d+/); // Может, ложное срабатывание?
result = result ? parseInt(result[0], 10) : "Цифры не найдены"; // Уф!

Такой подход обеспечивает безопасность переменной result даже при отсутствии искомых цифр.

Решение сложных задач извлечения чисел

Для комплексных задач извлечения чисел овладейте регулярными выражениями с использованием именованных групп захвата:

let data = "Дата: 2023-03-14, Цена: $123.45"; // Преодолеваем путаницу данных!
let regex = /Дата: (?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2}), Цена: \$(?<price>[\d\.]+)/; // Готовы к действию!
let match = data.match(regex); // Покоряем сложности!
let priceResult = match.groups.price ? parseFloat(match.groups.price) : null; // Обнаружено!

Именованные группы захвата упрощают чтение регулярного выражения и делают код более прозрачным.

Визуализация

Исполняя такую эпическую охоту за сокровищами:

Вы в глухом лесу: 🌲🌳🌲📜🌳🌲
И вот подсказка! Ваша строка: "Выиграйте 1-й приз — $1000!"

Приз? Целевые числа спрятаны внутри строки!

Отправляем нашего искателя:

const goldHunter = (forest) => forest.match(/\d+/g); // 🏹 Он знает, где искать!

И вот результат!

Раздаётся шорох, мигает свет: 🌲🌳🌲💰🌳🌲
Охотник приводит: ['1', '1000'] // Желанные числа извлечены из строки!

Мы успешно обнаружили числа в строке!

Полезные материалы

1. Регулярные выражения – JavaScript | MDN — полная информация о регулярных выражениях в JavaScript.
2. Метод match() строк в JavaScript — подробности применения метода match() при работе со строками в JavaScript.
3. Как работать со строками в JavaScript | DigitalOcean — справочник по различным операциям со строками.
4. Шаблоны и флаги — знакомство с шаблонами и флагами регулярных выражений.
5. Изучите JavaScript среднего уровня — для углублённого изучения JavaScript, включая подробности работы со строками.
6. regex101: создавайте, тестируйте и отлаживайте регулярные выражения — сервис для создания, тестирования и отладки шаблонов регулярных выражений.