Вступ
Під час роботи з рядками можуть виникати ситуації, які вимагають від нас динамічного додавання певного значення до такого рядка, щоб воно все одно повертало рядок. Цей акт називається інтерполяцією рядка.
Цим динамічним значенням може бути змінна, стан або щось інше, що містить фактичне значення, яке буде вбудовано в рядок.
У цьому посібнику ми розглянемо, як реалізувати інтерполяцію рядків у 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
- здатність
- рахунки
- досягнутий
- Діяти
- доданий
- хоча
- завжди
- Інший
- додаток
- прикладної
- підхід
- навколо
- стаття
- ставати
- КРАЩЕ
- Краще
- клас
- код
- порівняний
- комплекс
- Контейнер
- містить
- може
- створювати
- дані
- справу
- Залежно
- різний
- важкий
- Долар
- динамічний
- вбудований
- особливо
- і т.д.
- оцінка
- приклад
- Приклади
- вирази
- Перший
- керівництво
- тримати
- Як
- How To
- HTTPS
- здійснювати
- важливо
- екземпляр
- IT
- великий
- вчений
- Лінія
- ліній
- подивитися
- зробити
- Робить
- методика
- більше
- найбільш
- множинний
- помножене
- номер
- оператор
- Оператори
- приватність
- Люди
- потужний
- Реагувати
- відноситься
- повторювати
- вимагати
- повертати
- Умови повернення
- Зазначений
- підпис
- з
- ситуація
- So
- деякі
- конкретний
- standard
- стан
- Заява
- Як і раніше
- стиль
- взяття
- Команда
- us
- використання
- значення
- різний
- способи
- в
- Work
- робочий
- XML
- років