Склеивание ненулевых строк с разделителем в JavaScript
Быстрый ответ
Чтобы исключить элементы со значениями null или пустые строки, мы применяем метод Array.prototype.filter()
и объединяем результат с желаемым разделителем используя метод Array.prototype.join()
:
const joinNonEmpty = (arr, delim) => arr.filter(Boolean).join(delim);
// Пример:
console.log(joinNonEmpty(['apple', '', 'orange', null, 'banana'], ', ')); // "apple, orange, banana"
Изучайте возможные варианты
Немного магии от lodash
Если у вас есть Lodash
в вашем наборе инструментов разработчика, воспользуйтесь его эффективными функциями _.filter
и _.join
:
const _ = require('lodash');
const joinNonEmptyLodash = (arr, delim) => _.join(_.filter(arr, Boolean), delim);
// Пример:
console.log(joinNonEmptyLodash(['apple', '', null, 'banana'], ', ')); // "apple, banana"
Это решение подойдет для обеспечения совместимости со всеми браузерами, в том числе и со старыми версиями IE.
Создание универсального помощника
Для гибкого управления разнообразными типами входных данных, например, элементами адреса, можно создать универсальную функцию:
function joinIfPresent(delim, ...args) {
return args.filter(item => item).join(delim);
}
// Пример использования:
console.log(joinIfPresent(', ', 'Street Name', '', 'City', null, 'Country')); // Street Name, City, Country
Такой подход работает более эффективно, устраняя необходимость использования Array.prototype.slice.call(arguments)
.
Применение опциональных условий
Тернарная операция обеспечивает краткую и лаконичную проверку условий:
const joinWithTernary = (arr, delim) => arr.filter(item => item ? true : false).join(delim);
// Прямо-таки нашли скрытые фрукты:
console.log(joinWithTernary(['apple', null, 'banana'], '; ')); // "apple; banana"
Готовимся к исключительным ситуациям
В стиле jQuery
Когда jQuery входит в ваш инструментарий, процесс итерации и фильтрации данных становится проще:
const joinNonEmptyJQuery = (arr, delim) => $.map(arr, item => item || null).join(delim);
// Пример:
$('#element').append(joinNonEmptyJQuery(['<div>apple</div>', '', '<div>banana</div>'], ''));
Отличаем null от пустой строки
Можно различать null
и пустую строку
, основываясь на их длине
:
const joinWithoutFalsy = (arr, delim) => arr.filter(str => str && str.length > 0).join(delim);
// Увы, но не все найдено:
console.log(joinWithoutFalsy(['apple', undefined, 'banana'], ', ')); // "apple, banana"
Визуализация
Соберем все доступные ингредиенты, игнорируя отсутствующие:
Ингредиенты: 🍅, 🧄, 🍃, , 🧀
# Специальное блюдо от шефа: берем то, что у нас есть!
Подготовим рецепт с фирменной изюминкой:
Подадим на стол:
"🍅" + "🧄" + "🍃" + "" + "🧀" → "🍅 | 🧄 | 🧃 | 🧀"
// Результат отличается: Пустая банка не участвовала.
Строго типизированные данные: превращаем разнообразие в силу
Функция может работать с различными типами данных: числами
, объектами
и т.д, превращая их в единое строковое представление:
console.log(joinNonEmpty([42, null, { key: 'value' }, '', 'end'], ' – '));
// "42 – [object Object] – end" – 42 нашел свою дорогу, но преобразование ключа в значение утрачено
Структурирование кода подобно бутерброду
Структура кода важна,как хлеб для бутерброда — будьте внимательны. Например, при построении URL-адресов:
const urlParts = ['https://example.com', '', 'page', null];
console.log(joinNonEmpty(urlParts, '/')); // "https://example.com/page"
Объединение полей форм
Метод соединения умеет пропускать пустые поля, что позволяет удобно комбинировать данные, введенные пользователем:
const formData = {
firstName: 'John',
lastName: '',
email: 'john.doe@example.com',
};
console.log(joinNonEmpty(Object.values(formData), ' ')); // "John john.doe@example.com"
Полезные материалы
- Array.prototype.join() – JavaScript | MDN — подробное изучение метода
.join()
на MDN. - Array.prototype.filter() – JavaScript | MDN — описание процесса фильтрации массивов на MDN.
- Что такое оператор !! (не не) в JavaScript? – Stack Overflow — обсуждение использования
!!
для преобразования значений в булев тип на Stack Overflow. - Array methods – JavaScript.Info — подробное руководство по различным методам массивов с примерами на JavaScript.Info.