LearnJS

toUpperCase()

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

  let message = "Привет мир!";
  let upperCaseMessage = message.toUpperCase();
  console.log(upperCaseMessage);  // ПРИВЕТ МИР!

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

  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-upper-case">Применить toUpperCase()</button>

JavaScript примера

  document.querySelector('#btn-to-upper-case').addEventListener('click', toUpperCaseText)

  function toUpperCaseText() {
    for (let i = 1; i <= 3; i++) {
      let input = document.getElementById(`input${i}`);
      input.value = input.value.toUpperCase();
    }
  }

Пример 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.toUpperCase();
    let list = document.getElementById('myList').children;
    
    for (let i = 0; i < list.length; i++) {
      let item = list[i].textContent.toUpperCase();
      if (item.includes(input)) {
        list[i].style.display = "";
      } else {
        list[i].style.display = "none";
      }
    }
  }