Во-первых, я хотел сказать большое спасибо всем, кто прочитал мой предыдущий рассказ о «сопоставлении, уменьшении и фильтрации» в JavaScript, и еще большее спасибо кураторам за рекомендацию, это очень ценно!

В этой статье я просто хотел пройтись по двум новым функциям в ES6, которые рассматриваются как тонкости, это литералы шаблонов и многострочные строки.

Литералы шаблонов

Литералы шаблонов — это новый и улучшенный способ работы со строками в JavaScript, до ES5, чтобы объединить строки, которые у вас были с чем-то вроде строк

var myName = "alex";
var myAge = 22;
var myOlderAge;
console.log("My name is " + myName + " and I am"  + myAge + " years old" + "and not " + myOlderAge);

Как вы можете видеть, появляется много символов плюса и двойных кавычек, что может привести к очень сложной интерполяции строк, если вы планируете объединить много строк, однако с литералами шаблонов это значительно упрощается.

Первое, что нужно сделать, это вместо того, чтобы заключать строки в двойные кавычки, окружить их обратными кавычками, как показано ниже.

console.log(`hello there`)

Если вы хотите затем начать объединение строк, вы можете окружить переменные, которые хотите интерполировать, символом «$», а также открывающей и закрывающей фигурной скобкой, пример ниже.

var myName = "alex";
var myAge = 22;
var myOlderAge;
console.log(`My name is  ${myName} and I am  ${myAge} years old and not ${myOlderAge}`);

Это обеспечит тот же вывод, что и ранее построенный пример, но более читаемый с двойными кавычками и символами плюса.

Примером того, где я использую литералы шаблонов, являются мои проекты React-Native при определении запроса «fetch» ​​или «Axios». Я использую литералы шаблонов, если мне нужно ввести параметры для запроса, а также импортировать ключ API из отдельный файл, пример ниже.

Axios(`https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${currentLatitude},${currentLongitude}&radius=1500&type=restaurant&pagetoken=${nextPageToken}&key=${secretkey.secret}`)

Итак, как вы можете видеть, я использовал обратную кавычку, а также синтаксис «$ {}», чтобы содержать необходимые параметры для URL-адреса API, что делает код более читаемым (на мой взгляд).

Таким образом, литералы шаблонов очень помогают при интерполяции строк (т. е. при вставке переменных в строку) и делают код чертовски более читабельным для пользователя.

Разрушение

Деструктурирование также является тем, что я довольно часто использую при разработке проектов React-Native, это выражение, которое используется для извлечения данных из объектов, массивов, карт и наборов в их собственную индивидуальную переменную. Сначала я покажу пример извлечения данных объекта с использованием кода до ES6.

Ниже я создал базовый профиль себя внутри объекта.

const myProfile = {
name:"Alex",
facebook:"Non-existent",
favColor:"Purple",
favFilm:"Aliens",
favShoes:"Timberlands"
}
const myName = myProfile.name;
const myFavColor = myProfile.favColor;

Со временем этот процесс может стать громоздким из-за необходимости создавать отдельные переменные для каждого свойства объекта, однако есть способ упростить это, хотел бы я знать, что это было… О, подождите, я знаю!

Здесь приходит на помощь «деструктуризация», вместо использования нескольких строк для определения каждого свойства мы можем использовать один оператор/строку для создания нескольких переменных, пример ниже.

const {name,favShoes} = myProfile
console.log(name)

Тада!

Приведенный выше код в основном делает то же самое, что и предыдущий код, грубо говоря, код создает 2 переменные с именами «name» и «favShoes» и устанавливает их равными свойству с тем же именем ключа (ПРИМЕЧАНИЕ: имя переменной должно быть быть таким же, как ключ свойства объекта, чтобы он работал, если я ввел «favShoess» вместо «favShoes», вместо этого он вернет undefined)

Примером того, как я использовал деструктурирование в своих проектах React-Native, является то, что у меня было модальное окно, которое собиралось показать пользователю различное количество информации, и эти данные передавались компоненту через его «реквизиты», поэтому вместо ссылки « this.props.soundFile» каждый раз, когда я использовал деструктурирование, поэтому вместо этого я мог использовать «soundFile», ниже приведен пример.

const{onSwipeComplete,backDropPress,modalIsVisible,hangulCharacterToShow,modalText,playSoundButtonEvent,soundFileProgress,closeButtonEvent} = this.props;

Посмотрите на размер этого примера деструктурирования!

Но если вы посмотрите на этот пример кода в свойстве «title», у него есть «hangulCharacterToShow» (мне нужно было назвать свойство как-то поменьше), но из-за деструктуризации я могу ссылаться на это значение, используя только это вместо «this.props.hangulCharacterToShow». .

<Card titleStyle={ModalPopupStyle.cardContainer} title={hangulCharacterToShow}>
<View style={ModalPopupStyle.secondView}>
<View style={ModalPopupStyle.fourthView}>
<Text style={{fontFamily:Platform.OS==='ios'?fonts.MontSerrat:fonts.MontSerratAndroid}}>{modalText}</Text>
</View>

И вот, еще одна история закончена, спасибо, что прочитали это, я надеюсь, что вы узнали что-то новое, и если у вас есть какие-либо вопросы или критические замечания, не стесняйтесь писать комментарии, чтобы я мог стать лучше!

Спасибо :)