Автор оригинала: FreeCodeCamp Community Member.
Майкла Озомена
В этой статье я буду говорить о том, что «помеченные шаблонные литералы» являются и некоторые места, где я видел, как они используются.
Что такое «помеченные шаблонные литералы»?
Тежные шаблонные литералы были включены новой технологией, введенной в ES6, называемых «шаблонными литералами». Это просто синтаксис, который делает строку интерполяции возможной в JavaScript. До Шаблонные литералы Родился, разработчики JavaScript должны были бы сделать уродливое объединение строки.
Тегированные шаблонные литералы Предлагает вам возможность анализировать шаблонные литералы по отношению к тому, что вы хотите. Он работает путем объединения функций с Шаблонные литералы . Есть две части помеченный шаблон литерал первый, который является Функция метки а второй, Шаблон литерал Отказ
const coolVariable = "Cool Value";
const anotherCoolVariable = "Another Cool Value";
randomTagFunctionName`${coolVariable} in a tagged template literal with ${anotherCoolVariable} just sitting there`Теперь первый параметр в Функция метки является переменным, содержащим массив строк в шаблонном литерате:
function randomTagFunctionName(firstParameter) {console.log(firstParameter); // ["", " in a tagged template literal with ", " just sitting there"]
}
И все остальные последующие параметры будут содержать значения, передаваемые на шаблон литерал:
function randomTagFunctionName(firstParameter, secondParameter, thirdParameter) {console.log(secondParameter); // "Cool Value"
console.log(thirdParameter); // "Another Cool Value"
}
Воспользовавшись оператором OS6 REST, мы можем переопределить нашу функцию, как это:
function randomTagFunctionName(firstParameter, ...otherParameters) {console.log(otherParameters); // ["Cool Value", "Another Cool Value"]
}
Помеченные шаблонные литералы в стиле компонентов.
Теперь, когда вы понимаете, какие меченные шаблонные литералы, давайте обсудим его приложение в реальном мире.
Стильные компоненты – это библиотека JavaScript, которая позволяет создавать и прикреплять стили CSS к вашим реагированным и реагировать на новых компонентах. Вот что это выглядит:
const Button = styled.button` color: red;`
В приведенном выше примере кнопка не просто переменная, это компонент. Это означает, что вы можете смешать его с другими компонентами, а его выход – это элемент кнопки HTML.
Это очень захватывающее применение для меченых шаблонных литералов, потому что оно позволяет вам наносить CSS таким образом, что все еще сохраняет ваш компонентный файл чистым и заставляет вас чувствовать, что вы пишете CSS в обычной стиле. Без помеченных шаблонов литералов, нам придется представлять этот стиль в качестве объекта JavaScript, как это:
const Button = styled.button({ color: 'red'})Другое использование имеет место с graphql-tag Библиотека используется в APOLLO GRAPHQL . Я не думаю, что есть возможный способ не использовать graphql-tag Библиотека при работе с Apollo GraphQL (Если есть, пожалуйста, дайте мне знать!).
В заключение.
Я думаю, что очень хорошо изучать новые технологии и даже лучше посмотреть, как другие использовали его для решения проблем. Если у вас есть другие случаи использования реального мира для помеченных шаблонных литералов, пожалуйста, дайте мне знать.
PS: «Реальный мир» также означает ваши боковые проекты или CodeSandbox Образцы кода.
Оригинал: “https://www.freecodecamp.org/news/a-quick-introduction-to-tagged-template-literals-2a07fd54bc1d/”