String.trim() в JavaScript — прибрати пробіли по краях

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

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

trim() часто застосовується у веб-формах та інших інтерфейсах, де користувачі вводять текст. Видалення зайвих пробілів на початку та в кінці рядків допомагає запобігти помилкам, пов'язаним з непотрібними символами, які можуть бути введені випадково.

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

Простий приклад використання trim() може виглядати так:

let greeting = "   Привіт, світе!   ";
let trimmedGreeting = greeting.trim();
console.log(trimmedGreeting); // Виведе: "Привіт, світе!"

У цьому випадку, метод trim() видаляє пробіл з обох кінців рядка greeting, а результат зберігається в trimmedGreeting.

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

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

let data = "  яблуко, банан, вишня  ";
let fruits = data.trim().split(", ");
console.log(fruits); // Виведе: ["яблуко", "банан", "вишня"]

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

Обробка вводу користувача

trim() також може використовуватися для обробки вводу користувача перед збереженням у базу даних або подальшою обробкою:

function saveUserInput(input) {
  let cleanedInput = input.trim();
  // Збереження cleanedInput в базу даних
}

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

правити

Порада

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

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

Порада

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

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

Порада

Цей метод може бути використаний для підготовки рядкових даних перед їхнім записом у базу даних або перед їх відправленням як частини запиту API, щоб запобігти можливим помилкам внаслідок випадкових пробільних символів.

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

Порада

При роботі з масивами рядків, таких як дані, отримані з файлу або з текстових полів, trim() може бути застосований у комбінації з методами масивів, такими як map, для ефективного очищення кожного елемента масиву від зайвих пробілів. Наприклад: let cleanedData = dataArray.map(item => item.trim());.

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

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

Синтаксис

trim()

Повернення

string

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	4	3.5	5	10.5	12	10

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

Переглядач
	4.4	18	4	5

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

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

Приклади

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

<header>
  <h2 class="title">String.prototype.trim()</h2>
  <p class="description">Видаляє пробіли на початку та в кінці рядка.</p>
</header>
<main>
  <div class="result">
    <input type="text" id="inputText" placeholder="Введіть текст з пробілами">
    <button onclick="trimText()">Видалити Пробіли</button>
    <p>Результат: <br><span id="outputText"></span></p>
  </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);
}

.result span {
  font-style: italic;
}

input, button {
  padding: 10px;
  margin-top: 10px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
}

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

function trimText() {
  var inputText = document.getElementById("inputText").value;
  var trimmedText = inputText.trim();
  document.getElementById("outputText").textContent = trimmedText;
}
//# sourceURL=pen.js

let fruits = ["Яблуко", "Банан", "Апельсин"];
let searchQuery = "  Банан ";

function findFruit(query) {
    query = query.trim();
    return fruits.includes(query);
}

console.log(findFruit(searchQuery)); // true

let originalString = "  Привіт, світе!  ";
let trimmedString = originalString.trim();

console.log(trimmedString); // Виводить: "Привіт, світе!"