Не можете вернуть шаблонный литерал на CodePen?

Я обнаружил что-то странное на CodePen. Если я return шаблонный литерал из функции, он возвращает пустую строку. Если я сначала назначу точно такой же шаблонный литерал переменной, то return переменная, она возвращает ожидаемую строку.

Если я рассматриваю перо в режиме полного просмотра страницы или в режиме отладки, проблема исчезнет.

У меня вопрос: нашел ли я ошибку в CodePen, или я что-то упустил из виду?

Демонстрация CodePen: http://codepen.io/VAggrippino/pen/VPbYwM

Следующий фрагмент кода может быть бессмысленным, так как он кажется проблемой только в CodePen...

window.onload = function() {
  const useVariable = document.getElementById('useVariable');
  const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

  const cities = [];
  fetch(endpoint)
    .then(response => response.json())
    .then(data => cities.push(...data));

  function findMatches(wordToMatch, cities) {
    return cities.filter(place => {
      const regex = new RegExp(wordToMatch, 'gi');
      return place.city.match(regex) || place.state.match(regex);
    });
  }

  function displayMatches() {
    const matchArray = findMatches(this.value, cities);
    const html = matchArray.map(place => {
      if (useVariable.checked) {
        let listItem = `
          <li>
            <span class="name">${place.city}, ${place.state}</span>
            <span class="population">${place.population}</span>
          </li>
        `;
        return listItem;
      } else {
        return `
          <li>
            <span class="name">${place.city}, ${place.state}</span>
            <span class="population">${place.population}</span>
          </li>
        `;
      }
    }).join('');
    console.log('"' + html + '"');
    suggestions.innerHTML = html;
  }
  
  const searchInput = document.querySelector('.search');
  const suggestions = document.querySelector('.suggestions');

  searchInput.addEventListener('change', displayMatches);
  searchInput.addEventListener('keyup', displayMatches);
}
html {
  box-sizing: border-box;
  background: #ffc600;
  font-family: 'helvetica neue';
  font-size: 20px;
  font-weight: 200;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.search {
  width: 100%;
  padding: 20px;
}

.search-form {
  max-width: 400px;
  margin: 50px auto;
}

input.search {
  margin: 0;
  text-align: center;
  outline: 0;
  border: 10px solid #F7F7F7;
  width: 120%;
  left: -10%;
  position: relative;
  top: 10px;
  z-index: 2;
  border-radius: 5px;
  font-size: 40px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
}

.suggestions {
  margin: 0;
  padding: 0;
  position: relative;
  /*perspective:20px;*/
}

.suggestions li {
  background: white;
  list-style: none;
  border-bottom: 1px solid #D8D8D8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
  margin: 0;
  padding: 20px;
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;
  text-transform: capitalize;
}

.suggestions li:nth-child(even) {
  transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
  background: linear-gradient(to bottom, #ffffff 0%, #EFEFEF 100%);
}

.suggestions li:nth-child(odd) {
  transform: perspective(100px) rotateX(-3deg) translateY(3px);
  background: linear-gradient(to top, #ffffff 0%, #EFEFEF 100%);
}

span.population {
  font-size: 15px;
}

.details {
  text-align: center;
  font-size: 15px;
}

.hl {
  background: #ffc600;
}

.love {
  text-align: center;
}

a {
  color: black;
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
<form class="search-form">
  <label><input type="checkbox" id="useVariable">Use Variable</label>
  <input type="text" class="search" placeholder="City or State">
  <ul class="suggestions">
    <li>Filter for a city</li>
    <li>or a state</li>
  </ul>
</form>

Вы можете узнать этот код из #Javascript30. Это задача № 6.

Источник

2 ответа

Решение

Команда CodePen смогла подтвердить, что это ошибка в CodePen, через свою учетную запись Twitter:

https://twitter.com/VAggrippino/status/822727824599490560

Я надеялся, что один из них также разместит здесь ответ, но не похоже, что это произойдет.

Источник

У вас возникли проблемы с символом кодирования в строке номер 32. Этот символ выдавал ошибку с литералом шаблона, поэтому он не работал. Я просто раздвоил твою ручку и починил ее. Проверьте это здесь.

`<li><span class='name'>${place.city}, ${place.state} </span>
    <span class='population'>${place.population}</span>
/* <-- here was your problem */ </li>`

http://codepen.io/damianfabian/pen/XpRmBW?editors=0011

Источник
Другие вопросы по тегам