Проблема с преобразованием функции из ES6 в обычный JavaScript для работы в Internet Explorer

Question

Я создал поиск по каталогу с помощью регулярных выражений, чтобы сопоставить ввод с данными. Я следовал за учебником для половины и добавил к нему самостоятельно. Он работает в Chrome, но не в Internet Explorer.

Я выяснил, что это связано с несовместимостью ES6 в Internet Explorer, и теперь у меня возникают проблемы с поиском правильного преобразования моей функции displayMatches в vanilla javascript или jQuery без ES6.

Пока что большая часть этого работает, за исключением того, что я не могу понять, как убрать запятые в моем html для списка совпадений, хотя я пытался использовать .join('')

Скриншот № 1

Снимок экрана № 2 - видите запятые между ними?

Это рабочий код Chrome:

function displayMatches() {
    // console.log(this.value);
    $('.suggestions').show();
    var matchArray = findMatches(this.value, employees);
    console.log(matchArray);
    var html = matchArray.slice(0,10).map(person => {
        var regex = new RegExp(this.value, 'gi');
        var firstName = person.GivenName.replace(regex, `<span class="hl">${this.value}</span>`);
        var lastName = person.Surname.replace(regex, `<span class="hl">${this.value}</span>`);
        var extension;

        if (person.Phone_Ext1 !== null){
            extension = person.Phone_Ext1;
        } else {extension = "N/A"}

        return `
            <li class="search-item" data-id=${person.EmployeeID}>
                <span class="person">${firstName} ${lastName}</span>
                <span class="phone-ext">Ext. ${extension}</span>
            </li>
        `
    }).join('');

    if ($('#search-box').val() == ""){
        suggestions.innerHTML = "";
    } else {
        suggestions.innerHTML = html;
    }
}

И это моя попытка конвертировать:

function displayMatches() {
    // console.log(this.value);
    $('.suggestions').show();
    var matchArray = findMatches(this.value, employees);
    console.log(matchArray);

    var html = [];
    var person;
    var list;

    for(var i=0; i < matchArray.slice(0,10).length; i++){
        person = matchArray.slice(0,10)[i];
        var regex = new RegExp(this.value, 'gi');
        var hilight = '<span class="hl">' + this.value + '</span>';
        var firstName = person.GivenName.replace(regex, hilight);
        var lastName = person.Surname.replace(regex, hilight);
        var extension;

        if (person.Phone_Ext1 !== null){
            extension = person.Phone_Ext1;
        } else {
            extension = "N/A"
        }

        list =
            '<li class="search-item" data-id=' + person.EmployeeID +'>' +
            '<span class="person">' + firstName + ' ' + lastName + '</span>' +
            '<span class="phone-ext">Ext. ' + extension + '</span>' +
            '</li>';
        html.push(list);
    }
    html.join('');
    console.log(html);

    if ($('#search-box').val() == ""){
        suggestions.innerHTML = "";
    } else {
        suggestions.innerHTML = html;
    }
}

Answer 1

html.join('') возвращает новую строку. Он не преобразует массив в строку, он не присваивает новое значение переменной html. Вам нужно будет сделать

html = html.join('');

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

Кстати, вам даже не нужно самостоятельно создавать и заполнять массив в цикле, вы можете использовать ES5 Array map метод начиная с IE9. Как @ H.B. отмеченный в комментариях, вам нужно только использовать выражение function вместо синтаксиса стрелки.