String() в JavaScript — перетворення значення на рядок

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

String — це основний об'єкт для рядків тексту в JavaScript. Рядок — це послідовність символів, які можуть представляти слова, речення або будь-яку іншу комбінацію символів.

В інтерактивних веб-додатках велика кількість інформації представлена у вигляді тексту. Чи то імена користувачів, поштові адреси, описи товарів або повідомлення в чаті — усе це рядки. Методи та властивості String допомагають легко та ефективно обробляти текстові дані.

String можна використовувати в літералі рядка, об'єкті або як конструктор для створення рядкових об'єктів. Приклад:

let simpleString = "Це літерал рядка";
let stringObject = new String("Це рядковий об'єкт");

Основні сфери застосування:

1. Об'єднання або розбиття рядків.
2. Пошук підрядків або заміна одного підрядка на інший.
3. Перевірка наявності певного символу чи підрядка у рядку.

Довжина рядка знаходиться за допомогою властивості .length. Приклад:

let name = "Олексій";
console.log(name.length); // 7

Метод .charAt() повертає символ, який знаходиться на вказаному індексі у рядку. Приклад:

let greeting = "Привіт!";
console.log(greeting.charAt(1)); // р

Щоб об'єднати два рядки, можна використовувати оператор + або метод .concat(). Приклад:

let str1 = "Вітаємо";
let str2 = " вас!";
console.log(str1 + str2); // Вітаємо вас!

Важливі відмінності:

• Рядки в JavaScript є незмінними. Це означає, що після створення рядка його не можна змінити. Замість цього можна створити новий рядок з внесеними змінами.
• Якщо розробник намагається отримати доступ до символу за індексом, який не існує, він отримає порожній рядок.
• Якщо вам потрібно конвертувати інші типи даних в рядок, ви можете використовувати метод .toString() або просто додати пустий рядок до значення (value + "").

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

правити

Порада

Методи рядків, такі як toUpperCase() або toLowerCase(), допомагають стандартизувати введення даних, особливо коли йдеться про порівняння рядків.

автор: Bond правити

Порада

Замість того, щоб використовувати плюс для з'єднання рядків і змінних, використовуйте темплейт-рядки, які вводяться за допомогою символу `. Вони забезпечують чітке введення рядків та дозволяють вставляти вирази безпосередньо у рядок.

let name = "Олександр";
console.log(`Привіт, ${name}!`);  // Виведе: "Привіт, Олександр!"

автор: Bond правити

Порада

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

let message = "";
if (message.length > 0) {
    console.log(`Повідомлення: ${message}`);
}

автор: Bond правити

Порада

Замість використання базових методів рядків для пошуку та заміни, вивчіть можливості регулярних виразів. Вони можуть бути потужним інструментом для більш складних операцій з рядками.

let text = "Апельсини та яблука.";
let replaced = text.replace(/яблука|апельсини/gi, "фрукти");
console.log(replaced);  // Виведе: "Фрукти та фрукти."

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

ver string = "";

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12	3

Підтримка: мобільні переглядачі

Переглядач
	1	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

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

<header>
  <h2 class="title">String.toUpperCase()</h2>
  <p class="description">Метод для перетворення всіх символів рядка в верхній регістр.</p>
</header>
<main>
  <div class="result">
    <label for="text-input">Введіть текст для перетворення:</label>
    <input id="text-input" type="text" placeholder="Введіть ваш текст тут">
    <button onclick="convertToUpperCase()">Перетворити на ВЕРХНІЙ регістр</button>
    <div id="output"></div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  margin-top: 10px;
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  text-align: center;
  display: inline-block;
}

button:hover {
  background-color: #45a049;
}

#output {
  margin-top: 20px;
  font-weight: bold;
}

function convertToUpperCase() {
  let inputText = document.getElementById('text-input').value;
  let upperCaseText = inputText.toUpperCase();
  document.getElementById('output').textContent = "Результат: " + upperCaseText;
}
//# sourceURL=pen.js

// Визначаємо змінну типу Number
let number = 12345;

// Перетворюємо число в рядок
let stringNumber = String(number);

// Перевіряємо тип змінної після перетворення
console.log(typeof stringNumber);  // виведе "string"

// Визначаємо рядок
let greeting = "Привіт, світ!";

// Отримуємо п'ятий символ рядка
let character = greeting.charAt(4);

// Виводимо отриманий символ
console.log(character);  // виведе "в"