Обрезка пробелов в строке JavaScript

Когда пользователь вводит данные, в начале или конце строки могут появиться лишние пробелы.

let email = '  admin@mail.com  ';

console.log(email === 'admin@mail.com');

Результат:

false

Для человека это почти одна и та же строка, но для JavaScript пробелы тоже являются символами. Поэтому сравнение не сработало.

Чтобы убрать лишние пробелы по краям строки, используют метод trim().

let email = '  admin@mail.com  ';
let cleanEmail = email.trim();

console.log(cleanEmail === 'admin@mail.com');

Результат:

true

Что значит обрезать пробелы

Обрезать пробелы - значит удалить пробельные символы в начале и в конце строки.

Обычно речь идет про обычные пробелы, но методы обрезки также убирают переносы строк и табуляцию.

let text = '  JavaScript  ';

console.log('[' + text + ']');
console.log('[' + text.trim() + ']');

Результат:

[  JavaScript  ]
[JavaScript]

Квадратные скобки здесь нужны только для примера. Так проще увидеть, где были пробелы.

Метод trim()

trim() возвращает новую строку без пробельных символов в начале и в конце.

let name = '  Анна  ';

console.log(name.trim());

Результат:

Анна

Метод удобно использовать перед сравнением, поиском или сохранением данных.

Метод trimStart()

trimStart() убирает пробелы только в начале строки.

let text = '  JavaScript  ';

console.log('[' + text.trimStart() + ']');

Результат:

[JavaScript  ]

Пробелы справа остались на месте.

Метод trimEnd()

trimEnd() убирает пробелы только в конце строки.

let text = '  JavaScript  ';

console.log('[' + text.trimEnd() + ']');

Результат:

[  JavaScript]

Пробелы слева остались на месте.

Пробелы внутри строки

trim(), trimStart() и trimEnd() не удаляют пробелы внутри строки.

let message = '  Привет мир  ';

console.log(message.trim());

Результат:

Привет мир

Пробел между словами остался, потому что он находится внутри строки, а не по краям.

Строка не меняется

Методы обрезки не изменяют исходную строку. Они возвращают новое значение.

let name = '  Анна  ';

name.trim();

console.log('[' + name + ']');

Результат:

[  Анна  ]

Если очищенная строка нужна дальше, результат нужно сохранить.

let name = '  Анна  ';
let cleanName = name.trim();

console.log('[' + cleanName + ']');

Результат:

[Анна]

Пример с пользовательским вводом

Допустим, пользователь ввел логин с пробелами по краям.

let userLogin = '  ivan  ';
let savedLogin = 'ivan';

console.log(userLogin === savedLogin);
console.log(userLogin.trim() === savedLogin);

Результат:

false
true

После trim() лишние пробелы не мешают сравнению.

Итого

Для обрезки пробелов в строке используют методы trim(), trimStart() и trimEnd().

  • trim() убирает пробелы в начале и в конце строки.
  • trimStart() убирает пробелы только в начале.
  • trimEnd() убирает пробелы только в конце.
  • Пробелы внутри строки эти методы не удаляют.
  • Исходная строка не меняется.