toLowerCase()

Метод toLowerCase() в JavaScript используется для преобразования символов в строке к нижнему регистру. Это встроенный метод строковых объектов, который не требует аргументов и возвращает новую строку, где все алфавитные символы преобразованы к нижнему регистру. Метод toLowerCase() часто применяется для обеспечения единообразия ввода данных пользователем, например, при сравнении строк без учета регистра.

  
  let message = "Привет мир!";
  let lowerCaseMessage = message.toLowerCase();
  console.log(lowerCaseMessage);  // привет мир!
  

Особенности работы метода toLowerCase()

  1. Не изменяет исходную строку: Метод возвращает новую строку, исходная строка остается без изменений.
  2. Не влияет на неалфавитные символы: Цифры, знаки пунктуации и специальные символы остаются неизменными.
  3. Не влияет на буквы, уже находящиеся в нижнем регистре: Если символы уже в нижнем регистре, они остаются такими же.
  4. Вызовет ошибку TypeError, если применяется к null или undefined. Это происходит из-за того, что null и undefined не обладают свойствами или методами. Учитывайте это, чтобы избежать ошибок в программе.

Пример 1: преобразование текста

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

HTML примера

  
  <input type="text" id="input1" placeholder="Введите текст">
  <input type="text" id="input2" placeholder="Введите текст">
  <input type="text" id="input3" placeholder="Введите текст">
  <button id="btn-to-lower-case">Применить toLowerCase()</button>
  

JavaScript примера

  
  document.querySelector('#btn-to-lower-case').addEventListener('click', toLowerCaseText)
  
  function toLowerCaseText() {
    for (let i = 1; i <= 3; i++) {
      let input = document.getElementById(`input${i}`);
      input.value = input.value.toLowerCase();
    }
  }
  

Пример 2: Фильтрация и поиск

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

  • Яблоко
  • Банан
  • Виноград
  • Апельсин

HTML примера

  
  <input type="text" id="searchInput" placeholder="Поиск...">
  <ul id="myList">
    <li>Яблоко</li>
    <li>Банан</li>
    <li>Виноград</li>
    <li>Апельсин</li>
  </ul>
  

JavaScript примера

  
  document.getElementById('searchInput').addEventListener('input', filterList);

  function filterList() {
    let input = document.getElementById('searchInput').value.toLowerCase();
    let list = document.getElementById('myList').children;
    
    for (let i = 0; i < list.length; i++) {
      let item = list[i].textContent.toLowerCase();
      if (item.includes(input)) {
        list[i].style.display = "";
      } else {
        list[i].style.display = "none";
      }
    }
  }