Конкатенация строк всегда начинается с неопределенного

Question

Мне нужно преобразовать элементы в массиве в строку, поместив - для каждого элемента всякий раз, когда я добавляю или удаляю элемент в массиве. Вот как я это реализовал:

onSelect(event: MatOptionSelectionChange, service: string) {
    let serviceList: string;
    if(event.source.selected) {
      this.servicesToToggle.push(service);
    } else {
      this.servicesToToggle = this.servicesToToggle.filter(item => item !== service);
    }

    this.servicesToToggle.forEach(element => {
      if(element === undefined) {
        return;
      }
      serviceList += '-' + element;
    });
    console.log(serviceList);
  }

Проблема в том, что undefined включается в начале каждой строки. как это:

undefined-Hardware Service 
undefined-Hardware Service-RFID Service
undefined-Hardware Service 
undefined-Hardware Service-RFID Service
undefined-Hardware Service-RFID Service-QR Service 
undefined-Hardware Service-RFID Service 
undefined-RFID Service undefined

Не могли бы вы помочь мне с этим?

Answer 1

Это происходит потому, что вы не инициализируете переменную serviceList.

Объявленная и не инициализированная переменная имеет значение undefined.

var x;

console.log(x); // undefined

Если вы используете оператор + между undefined и строкой, undefined будет приведен к строке "undefined":

var x;

console.log(x + 'foo'); // undefinedfoo

Чтобы решить эту проблему, инициализируйте serviceList пустой строкой:

let serviceList: string = '';

Я отвечу и на вопрос вашего комментария.

Есть много способов объединить список строк, мой любимый - использовать .join:

var concatenated = ['list', 'of', 'elements'].join(' - ');
console.log(concatenated);

В вашем случае это будет:

serviceList = this.servicesToToggle.join('-');

Другим решением, если хотите, может быть проверка индекса, мы не ставим -, если index === 0:

this.servicesToToggle
.filter(Boolean) // removes null, undefined and empty strings
.forEach((element, index) => {
  const separator = index === 0 ? '' : '-';
  serviceList += separator + element;
});