Во-первых, я хотел сказать большое спасибо всем, кто прочитал мой предыдущий рассказ о «сопоставлении, уменьшении и фильтрации» в 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>
И вот, еще одна история закончена, спасибо, что прочитали это, я надеюсь, что вы узнали что-то новое, и если у вас есть какие-либо вопросы или критические замечания, не стесняйтесь писать комментарии, чтобы я мог стать лучше!
Спасибо :)