Введение
При работе со строками могут возникнуть ситуации, требующие от нас динамического добавления определенного значения в такую строку, чтобы она по-прежнему возвращала строку. Это действие называется интерполяцией строк.
Это динамическое значение может быть переменной, состоянием или чем-то еще, что содержит фактическое значение, которое будет внедрено в строку.
В этом руководстве мы рассмотрим, как реализовать интерполяцию строк в React, принимая во внимание различные случаи, в которых может потребоваться интерполяция строк, и способы ее достижения.
Интерполяция строк в ES5 и ES6
Интерполяция строк может быть выполнена двумя способами: конкатенацией и литералами шаблона. Хотя некоторые утверждают, что конкатенация не является интерполяцией строк, интерполяция строк относится к возможности создавать строки путем замены заполнителей, что явно делает конкатенация.
До введения шаблонных литералов в ES6 мы всегда использовали конкатенацию, что становится очень сложным при работе с многострочными строками, требующими замены многих переменных. Когда литералы шаблонов были введены в ES6, оказалось, что их гораздо проще реализовать, особенно для более длинных или многострочных строк, в которые мы хотим встроить выражения.
В этом руководстве мы рассмотрим оба метода, а затем выполним несколько примеров с литералами шаблонов, что является рекомендуемым подходом.
Интерполяция строк в React с конкатенацией
Стандартный метод конкатенации заключается в использовании +
оператор вокруг конкретной переменной или состояния:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
В приведенном выше коде у нас есть состояние fontSize
который имеет значение large
. Мы хотим, чтобы класс извлекался динамически — например, это может быть text-small
, text-large
, text-medium
и т.д. В зависимости от состояния className
таким образом, будет применяться к заголовку!
При конкатенации мы сначала поместим нашу фактическую строку, а затем воспользуемся+
оператор для интерполяции переменной с фактической строкой, чтобы он мог вернуть интерполированное значение:
Приведенный выше метод усложняется, когда у нас есть две или более переменных, особенно если строки добавляются в другую строку, а не в конец.
Интерполяция строк для реагирования на шаблонные литералы
Это лучший метод для интерполяции строк. Он был добавлен в ES6 и с тех пор стал наиболее часто используемым методом интерполяции строк. Используя строковые литералы шаблонов, давайте повторим предыдущий пример:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Как видно из приведенного выше кода, мы больше не используем оператор «плюс» в литералах шаблонов, вместо этого мы используем обратные кавычки для всей строки, а затем используем знак доллара и фигурные скобки для вставки наших переменных и динамических значений.
Заявление оценивается и const fontSize
вставляется в строку.
Давайте посмотрим еще на несколько примеров интерполяции строк React!
Как использовать интерполяцию строк для передачи значений стиля в React
В ситуации, когда у нас есть данные о стиле, хранящиеся в переменной, которую мы хотим использовать для оформления текста внутри React, мы можем использовать литералы шаблонов:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Как мы уже говорили ранее, знак доллара и фигурные скобки используются для хранения нашего заполнителя, и это вернет стиль надлежащим образом:
Мы также можем выполнить вычисление внутри фигурных скобок, предположим, мы хотим, чтобы число умножалось:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Как использовать интерполяцию строк с выражениями в React
До сих пор мы видели, что можем выполнять вычисления; также важно отметить, что мы можем добавлять выражения в фигурные скобки, чтобы получить правильное значение на основе выражения и использовать его:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Как интерполировать многострочную строку с помощью литералов шаблона
Как мы уже говорили ранее, литералы шаблонов упрощают добавление заполнителей к строкам из нескольких строк:
const App = () => { let user = { name: 'John Doe', age: 14, hobby: 'basket ball', }; let sentence = `The fact that ${user.name} is ${user.age} years old and his hobby is ${user.hobby} amazes me.`; return ( <div className="container"> <div> <p>{sentence}</p> </div> </div> );
};
В приведенном выше коде мы видим, насколько просто использовать литералы шаблонов по сравнению с конкатенацией:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Как использовать логические операторы с шаблонными литералами
До сих пор мы видели, как передавать выражения с тернарными операторами, также лучше всего мы видим, что логические операторы также могут работать с литералами шаблонов:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Заключение
В этой статье мы узнали, как реализовать интерполяцию строк с помощью двух стандартных методов, а также насколько мощными могут быть литералы шаблонов. С момента появления литералов шаблонов большинство людей предпочитают использовать их из-за простоты использования и значительно лучшей читаемости кода.
- '
- &
- a
- способность
- Учетная запись
- достигнутый
- Действие (Act):
- добавленный
- Несмотря на то, что
- всегда
- Другой
- приложение
- прикладной
- подхода
- около
- гайд
- становиться
- ЛУЧШЕЕ
- Лучшая
- класс
- код
- сравненный
- комплекс
- Container
- содержит
- может
- Создайте
- данным
- занимавшийся
- в зависимости
- различный
- трудный
- Доллар
- динамический
- встроенный
- особенно
- и т.д
- оценка
- пример
- Примеры
- выражения
- Во-первых,
- инструкция
- держать
- Как
- How To
- HTTPS
- осуществлять
- важную
- пример
- IT
- большой
- узнали
- линия
- линий
- посмотреть
- сделать
- Создание
- методы
- БОЛЕЕ
- самых
- с разными
- умноженная
- номер
- оператор
- Операторы
- особый
- Люди
- мощный
- реагировать
- понимается
- повторять
- требовать
- возвращают
- Возвращает
- Сказал
- подпись
- с
- ситуация
- So
- некоторые
- конкретный
- стандарт
- Область
- заявление
- По-прежнему
- стиль
- с
- Ассоциация
- us
- использование
- ценностное
- различный
- способы
- в
- Работа
- работает
- XML
- лет