Склеивание ненулевых строк с разделителем в 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"

Полезные материалы

1. Array.prototype.join() – JavaScript | MDN — подробное изучение метода .join() на MDN.
2. Array.prototype.filter() – JavaScript | MDN — описание процесса фильтрации массивов на MDN.
3. Что такое оператор !! (не не) в JavaScript? – Stack Overflow — обсуждение использования !! для преобразования значений в булев тип на Stack Overflow.
4. Array methods – JavaScript.Info — подробное руководство по различным методам массивов с примерами на JavaScript.Info.