Замена символа в строке JavaScript: из точки в двоеточие

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

Проще всего воспользоваться методом replace(), который является одним из базовых методов работы со строками в JavaScript:

'9.61'.replace('.', ':');

Такой вызов заменит первую точку в строке '9.61' на двоеточие, в результате получится строка '9:61'.

Подробнее о возможностях метода replace()

Подробнее рассмотрим метод replace(). Из-за своей простоты использования и мощности функционала, его можно назвать "супергероем методов работы со строками". Однако имеется важная деталь: по умолчанию метод заменяет только первое вхождение символа в строке.

Для того чтобы заменить все вхождения символа, нужно использовать глобальное регулярное выражение. Флаг g дает указание JavaScript заменить все точки:

'9.61.30'.replace(/\./g, ':'); // И получаем в результате: '9:61:30'.

Работа со специальными символами и использование метода val() в jQuery

В ходе работы с регулярными выражениями, когда встречаются специальные символы, потребуется особый подход. Решение достаточно просто: поместить символ в квадратные скобки, и он перестанет быть специальным. Вот так это выглядит в коде:

'9.61.30'.replace(/[.]/g, ':'); // И снова получаем корректный результат.

Если есть необходимость менять значения элементов формы через jQuery, стоит использовать метод val():

// Присваиваем новое значение
$('#timeInput').val('9.61').val(function(i, val) {
  return val.replace(/[.]/g, ':');
});

// Проверяем обновленное значение
console.log($('#timeInput').val());

Для других элементов формы у вас в распоряжении есть метод text().

Повторное использование кода и создание универсальных функций

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

function replaceDotsWithColons(input) {
  return input.replace(/[.]/g, ':');
}

console.log(replaceDotsWithColons('9.61'));  // В консоли будет отображено: '9:61'!

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

Преобразование строк в числа

Иногда возникает необходимость работать со строками, представляющими собой числа. Для проведения математических операций такие строки необходимо конвертировать в числовые значения:

const timeString = '9.61';
const timeNumber = Number(timeString.replace('.', ':'));

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

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

Представьте себе цифровой дисплей с надписью '9.61'.

До: 9.61    // Сначала устройство выглядело как калькулятор.
После:  9:61    // А теперь оно способно отображать время более наглядно.

Благодаря JavaScript можно исправить эту ситуацию:

'9.61'.replace('.', ':'); // Вот так просто дисплей превратился в часы!

Изменения очевидны:

До: [💡.]     // Была интересная идея, но её ещё нужно было довести до конца...
После:  [💡:]     // И вот воплощение идеи. Отличная работа!

Почувствуйте волшебство JavaScript!✨

Совместимость версий jQuery и использование цепочек методов

В процессе работы с jQuery всегда важно обращать внимание на версию библиотеки. Например, использование метода .val() с функциональным параметром требует наличия версии jQuery 1.4 или более новой. А использование цепочек вызовов методов демонстрирует правильное и грамотное использование jQuery.

Работа с неизменяемыми строками

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

const originalTime = '9.61';
const updatedTime = originalTime.replace('.', ':'); // JavaScript не изменит исходную строку.

Процесс тестирования

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

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

1. String.prototype.replace() – JavaScript | MDN — Документация MDN по методу replace().
2. Регулярные выражения – JavaScript | MDN — Подробная информация о работе с регулярными выражениями в JavaScript.
3. Метод String replace() в JavaScript – W3Schools — Дополнительный источник информации по методу replace() в JavaScript.
4. regex101: составление, тестирование и отладка regex — Интересный инструмент для работы с регулярными выражениями онлайн.
5. Строки – JavaScript.Info — Общая информация о манипуляциях со строками в JavaScript.