JS метод String.toUpperCase()


Загальний опис

Метод String.prototype.toUpperCase() є вбудованою функцією, що перетворює всі символи даного рядка на відповідні символи верхнього регістру. Цей метод не змінює оригінальний рядок, а повертає новий рядок, де всі символи переведені у верхній регістр. Він є корисним у ситуаціях, коли необхідно забезпечити однорідність форматування тексту, наприклад, при перетворенні вводу користувача для подальшої обробки або при відображенні тексту у вигляді заголовків або акцентованих повідомлень.

Основне застосування toUpperCase() полягає у перетворенні рядків у формат, де всі літери великі, що може бути корисним для нормалізації текстових даних. Наприклад, якщо програма очікує ввід користувача у вигляді великих літер, метод може автоматично перетворити вхідні дані, незалежно від того, як вони були введені.

Прості Приклади

Найпростіший приклад використання toUpperCase() включає в себе перетворення звичайного рядка у формат з великими літерами:

let lowerCaseString = "це текст малими літерами";
let upperCaseString = lowerCaseString.toUpperCase();
console.log(upperCaseString); // Виведе: "ЦЕ ТЕКСТ МАЛИМИ ЛІТЕРАМИ"

У цьому прикладі метод toUpperCase() викликається для рядка lowerCaseString і повертає новий рядок upperCaseString, де всі літери переведені у верхній регістр.

Складніші Сценарії

У складніших сценаріях toUpperCase() може бути використаний разом з іншими методами рядків для досягнення більш специфічних цілей. Наприклад, можна використати toUpperCase() разом з методом split() для перетворення кожного слова у рядку на верхній регістр:

let phrase = "Hello, how are you?";
let upperCaseWords = phrase.split(" ").map(word => word.toUpperCase()).join(" ");
console.log(upperCaseWords); // Виведе: "HELLO, HOW ARE YOU?"

Тут рядок спочатку розбивається на слова за допомогою split(" "), потім кожне слово перетворюється у верхній регістр методом toUpperCase(), а потім всі слова об'єднуються назад у один рядок за допомогою join(" ").

Перетворення Даних Користувача

Метод toUpperCase() також широко використовується для нормалізації вводу користувача, особливо в системах, де регістр символів має значення, наприклад, при порівнянні рядків:

let userInput = "[email protected]";
let normalizedInput = userInput.toUpperCase();

if (normalizedInput === "[email protected]") {
  console.log("Адреса електронної пошти введена правильно.");
} else {
  console.log("Адреса електронної пошти введена неправильно.");
}

У цьому прикладі, перетворення електронної адреси користувача у верхній регістр допомагає уникнути помилок при порівнянні рядків через відмінності у регістрах.

автор: Bond

Порада

Метод toUpperCase() ефективно використовується для нормалізації введення користувача, особливо у випадках, коли реєстр символів не має значення. Наприклад, під час перевірки логіна або адреси електронної пошти, ви можете перетворити ввід користувача на верхній регістр, щоб уникнути розбіжностей через різницю у реєстрі.

автор: Bond
Порада

Важливо пам'ятати, що toUpperCase() не змінює оригінальний рядок, а створює новий рядок із символами у верхньому регістрі. Таким чином, якщо вам потрібно зберегти результат, слід присвоїти його новій змінній або переприсвоїти оригінальній змінній.

автор: Bond
Порада

Цей метод також може бути корисним при відображенні тексту, щоб гарантувати єдність стилю, особливо в інтерфейсах користувача або при генерації звітів. Проте, слід уникати використання toUpperCase() для відображення тексту, якщо це може вплинути на зрозумілість або читабельність, наприклад, у повнотекстових статтях.

автор: Bond
Порада

При роботі з мультикультурними даними слід бути уважним, оскільки метод toUpperCase() може не завжди поводитися очікуваним чином із символами, що не входять до англійського алфавіту. Наприклад, в деяких мовах є випадки, коли перехід до верхнього регістру вимагає додаткових перетворень, не підтримуваних стандартним toUpperCase().

автор: Bond

Синтаксис

toUpperCase()

Повернення

string

Повертає новий рядок, у якому кожен символ початкового рядка перетворено на відповідний символ у верхньому регістрі. Цей метод не впливає на оригінальний рядок, забезпечуючи створення повністю нового рядка з перетвореними символами. Результатом є примітивний рядковий тип, який може бути використаний у будь-якому контексті, де потрібні рядки у верхньому регістрі.

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 3 12 3
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 1
Підтримка: серверні переглядачі
Переглядач Node.js Deno
0.10.0 1.0

Приклади

+ запропонувати свій приклад у пісочниці

У цьому прикладі ми розглядаємо просте застосування методу String.prototype.toUpperCase(). Цей метод використовується для перетворення всіх символів рядка на верхній регістр. Він часто використовується для нормалізації даних перед порівнянням рядків або для забезпечення єдності форматування виведення.

let myString = "Привіт, світе!";
let upperString = myString.toUpperCase();

console.log(upperString); // Виводить: "ПРИВІТ, СВІТЕ!"
автор: Bond

У цьому прикладі користувач вводить текст у текстове поле. Після натискання кнопки "Перетворити на Верхній Регістр", введений текст перетворюється на верхній регістр за допомогою методу String.prototype.toUpperCase() та відображається у вигляді результату.

автор: Bond

У цьому прикладі ми демонструємо використання String.prototype.toUpperCase() для порівняння рядків без врахування регістру. Це корисно в сценаріях, де необхідно забезпечити, що рядки вважаються однаковими незалежно від їх регістру, наприклад, при перевірці паролів або користувацьких імен.

function compareStringsIgnoreCase(str1, str2) {
    return str1.toUpperCase() === str2.toUpperCase();
}

let string1 = "JavaScript";
let string2 = "javascript";

console.log(compareStringsIgnoreCase(string1, string2)); // true
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід