Прошли времена ECMA 5, и вот некоторые новые функции, о которых мы будем говорить сегодня в этом посте. Стандарты ES6 предложили отличные функции для современного javascript, и почти все современные браузеры теперь поддерживают эти замечательные функции. Если вы поддерживаете старую версию браузера, вы можете проверить здесь, поддерживается ли эта функция.

Чтобы дать вам краткое описание функций, о которых мы собираемся поговорить в оставшейся части занятия, ниже приведены темы.

Таблица содержания

  • Пусть & Const
  • Функция стрелки
  • Классы
  • Распространение и отдых
  • Деструктуризация
  • Новый литерал объекта
  • Литералы строкового шаблона
  • Значение по умолчанию
  • Резюме

Мы подробно рассмотрим все темы и в основном рассмотрим передовые методы, когда и как использовать

LET & CONST

- - - - - - - - - - - - - - LET - - - - - - - - - - - - - - -

Поскольку мы изучили javascript, мы использовали ключевое слово «var» для определения любых переменных, оно имеет некоторые проблемы (или называемые функции в предыдущих стандартах javascript), например подъем и функциональное определение. Из-за чего область видимости создается на уровне функции, но многие языки предоставляют функцию, которая называется «Определение области на уровне блока». В предыдущем стандарте Javascript не говорилось о каких-либо областях видимости на уровне блоков.

ES6 представляет новую функцию «Определение уровня блока» с помощью ключевого слова «let». Итак, в настоящее время вы, должно быть, видели JS-разработчиков, использующих «let» вместо «var» в любом коде, который они пишут, и это также рекомендация, если говорить о стандартах (DO НЕ ИСПОЛЬЗУЙТЕ VAR). Давайте теперь перейдем к коду, чтобы увидеть преимущества (или проблемы, которые он решает).

Вы можете попробовать код самостоятельно, просто нужна последняя версия Chrome, если у вас ее нет, скачайте ее здесь. Откройте chrome console option + command + i на Mac для Windows, щелкните правой кнопкой мыши и выберите Проверить.

Приведенный выше код объясняет проблему с ключевым словом «var», переменная, определенная выше, используется до ее объявления. В Javascript это функция, известная как подъем, вы можете использовать имя переменной в пределах области действия функции где угодно, и вы сможете получить переменную, определенную со значением «undefined».

Теперь посмотрите на разницу: теперь мы использовали ключевое слово «let» вместо «var», это дает нам ошибку (ой, это неверно, что вы может подумать, я доволен var). Использование «var» опасно для вашего кода, так как может быть случай, когда вы используете некоторую переменную перед ее определением, но «let» не позволит вам бывает что :)

Теперь вы, должно быть, думаете, куда делась эта «Объемная область блока», давайте подойдем к этому и разберемся с практической реализацией.

Как вы можете видеть выше, мы создали функцию с блоком if внутри и создали переменную имени, используя «var» внутри и вне оператора if, поэтому из-за определения области видимости функции и подъема переменных в javascript имя Объявление переменной идет в начало функции и выводит нас с тем же значением имени, потому что условие if истинно. Давайте сделаем аналогичный пример с let.

Мы использовали здесь «let» вместо «var», и вы видите, что результат для обоих операторов изменился на другой. Это означает, что созданная внутренняя переменная не является областью функционального уровня, а имеет область видимости на уровне блока внутри оператора if.

с более реалистичным вариантом использования «пусть»

Скажем, нам нужно выполнить несколько вызовов API или любой другой асинхронный материал, и нам нужно отправить индекс или некоторые данные текущего цикла с помощью вызова / операции API / async. С «var», как вы можете видеть, значение в каждом setTimeout равно 5 (т.е. когда цикл завершается). Для этого могут быть разные решения, одним из которых может быть создание замыкания с помощью IIFE или использование другой функции для создания замыкания.

Но вы можете решить эту проблему, изменив всего лишь одно ключевое слово, т. Е. Да, вы правы let вместо var. Вы можете видеть ниже, просто изменив var на let, он печатает все значения отдельно для каждого оператора setTimeout. Причина в той же области видимости на уровне блоков, как let делает это сейчас в нативной реализации, но если вы хотите понять концепцию, вы можете попробовать Babel REPL

- - - - - - - - - - - - - ПОСТОЯННЫЙ— - - - - - - - - - - - - -

Константа, как следует из названия, должна быть своего рода константой, что означает, что значение никогда не изменится. Все свойства let встроены в «const», т.е. область видимости на уровне блока.

Новое в константе - это переменная, значение которой не изменится на присвоенное значение. Мы можем увидеть приведенный ниже код, чтобы лучше его понять.

Мы определили аналогичный вид функции, как указано выше, и изменили «let» на «const» и одну новую строку для изменения значения переменной name, определенной во внешней области видимости. . выходные данные показывают, что внутренний оператор работал правильно и ведение журнала в консоль, это означает, что «const» является «переменной с ограниченным объемом блока». Но во внешней области, когда мы пытаемся изменить однажды определенное значение, это не позволяло бы пользователям изменять.

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

То, что вы прочитали… (Быстрая редакция)

  • Let и Const создают переменную с блочной областью видимости.
  • Let и Const не поднимают воду.
  • Постоянные переменные нельзя изменить за время их существования.
  • Постоянные переменные должны быть определены и объявлены только в одной строке.

Функция стрелки

Javascript - это функциональный язык, и если вы разработчик javascript, то вы, должно быть, создали много функций за весь период написания кода. Старый школьный способ создания функции:

function point(x, y) {
  console.log("Point info {x, y}", x, y);
}
point(2,4);

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

const point = (x, y) => {
  console.log("Point info {x, y}", x, y);
}
point(2,4);

Это изменение синтаксиса, а также более серьезное изменение в техническом отношении того, как работает контекст функции. Итак, сначала внимательно посмотрите, как изменился синтаксис стрелочной функции и каковы преимущества использования этого синтаксиса. (Я очень большой поклонник этого короткого синтаксиса).

function sayHello(name) {
    return "Hello " + name;
}
sayHello("Amit");

Различные формы функции стрелки, где указанная выше функция может быть изменена на,

const sayHello = (name) => {
 return "Hello " + name;
}

Вышеупомянутая обычная функция теперь заменена стрелочной функцией с удалением ключевого слова function из начала и добавлением «=› »между концом круглых скобок и началом фигурных скобок, как показано выше. Это самая длинная форма стрелочной функции. У нас может быть еще более короткая версия этого синтаксиса.

const sayHello = (name) => "Hello " + name;

Если у нас есть только один оператор возврата, мы можем даже удалить фигурные скобки.

const sayHello = name => "Hello " + name;

Если у нас есть только один параметр, то его тоже можно удалить. Итак, как вы теперь видите, наша функция занимает одну строку.

const createHelloObject = (firstName, lastName) => {
  return {
    firstName: firstName,
    lastName: lastName
  }
}

Скажем, мы возвращаем объект из функции, тогда также есть краткая форма для возврата объекта из функции стрелки, как описано ниже.

const createHelloObject = (firstName, lastName) => ({
  firstName: firstName,
  lastName: lastName
});

Итак, здесь мы удалили ключевое слово return и вместо этого использовали скобки (). Это означает возврат объекта из функции.

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

Еще одно преимущество использования стрелочной функции заключается в том, что у нее нет собственного контекста, как в случае с нормальной функцией. Если вы программист javascript, вы, должно быть, знаете, как мучительно связывать текущий контекст в функциях (что, черт возьми, this (context) в JS). Все еще сбит с толку, позвольте мне продемонстрировать здесь пример.

function Ball(x, y) {
  this.x = x || 0;
  this.y = y || 0;
}
Ball.prototype.moveBall = function (dX, dY) {
 this.x += dX;
 this.y += dY;
}
Ball.prototype.startMovement = function () {
  setInterval(function () {
    this.moveBall(1,1);
  }, 1000);
}
const b1 = new Ball(10, 10);
b1.startMovement();

Мы создали класс Ball (функция в JS) и добавили два метода move и startMovement в прототип, чтобы любой экземпляр мог их использовать. Наконец, мы создали один экземпляр с 10,10 в качестве начальных значений и вызвали метод startMovement, который в конечном итоге вызовет метод moveBall с параметрами 1,1, и это должно изменить координаты или переместить мяч с 10,10 → 11. , 11 → 12,12 → и так далее… через каждую секунду.

Это кажется очень простым, правда, Buuutttttt есть некоторая проблема с этой логикой. Проблема здесь в методе setInterval this. moveBall будет undefined, так как в контексте setInterval this относится к объекту окна и есть нет метода moveBall, как показано ниже.

Как решить эту проблему, очень просто посмотреть ниже.

Ball.prototype.startMovement = function () {
  setInterval(() => {
    this.moveBall(1,1);
  }, 1000);
}

Мы преобразовали обычную функцию в функцию стрелки, и теперь она должна работать нормально, но как Итак, суть здесь в том, что функция стрелки в основном передает контекст внешнего, где бы он ни был определен, так что теперь здесь вместо окна он получит контекст контекста метода startMovement.

Итак, как функция Arrow выполняет эту магию, она в основном преобразуется в обычную функцию с помощью метода. bind и передачи this. Хороший вариант использования bind :), и он будет использоваться, если вы будете работать над React, где методы класса необходимо привязать в контексте JSX.

Ball.prototype.startMovement = function () {
  setInterval(() => {
    this.moveBall(1,1);
  }, 1000);
}
// converts to below.
Ball.prototype.startMovement = function () {
  setInterval(function() {
    this.moveBall(1,1);
  }.bind(this), 1000);
}

То, что вы прочитали… (Быстрая редакция)

  • Функция стрелки позволяет писать очень короткий синтаксис.
  • Если только один параметр, мы можем удалить круглые скобки.
  • Если кто-то возвращает оператор, мы можем удалить его, а также фигурные скобки.
  • Если мы возвращаем один объект из функции стрелки, то можно использовать круглые скобки и удалить оператор return.
  • Это решает основную проблему привязки родительского контекста.

Классы

Вы, должно быть, удивитесь, если не правильно расслышали, классы ???. Да Верно классы в Javascript, хотя javascript - это функциональный язык, который мы использовали для создания классов с функциями в JavaScript. Но теперь настоящие классы можно создавать в javascript, как и в других языках программирования высокого уровня, таких как .Net, Java. Классы Javascript обладают конструкторами, наследованием, геттерами / сеттерами и статическими методами.

Синтаксис - мы создадим тот же класс, что и описанный в уроке по функциям стрелок, и преобразуем его в ES6.

class Ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  moveBall(dX, dY) {
   this.x += dX;
   this.y += dY;
   console.log("x, y", this.x, this.y);
  }
  startMovement() {
    setInterval(() => { 
     this.moveBall(1,1);
    }, 1000);
  }
}
const b1 = new Ball(10, 10);
b1.startMovement();

Мы успешно преобразовали предыдущий код в новый синтаксис на основе классов. Он будет преобразован в аналогичный синтаксис, если вы используете какой-либо транспилятор, например babel.

Базовый синтаксис класса имеет конструктор, в котором мы инициализируем свойства и передаем параметры конструктору родительского класса через ключевое слово super (мы увидим это в действии в следующем разделе наследования) или делаем все, что нужно сделать при инициализации. фаза, когда создается любой экземпляр класса. Он также может содержать созданные выше методы класса, такие как moveBall и startMovement.

Наследование. Теперь мы можем расширить тот же класс до класса FootBall и увидеть его в действии.

class FootBall extends Ball {
  constructor(x, y, color) {
   super(x, y);
   this.color = color;  
  }
  getColor() {
    console.log("color", this.color);
    return this.color;
  }
}
const b2 = new FootBall(12, 12,'Red');
b2.getColor();
b2.startMovement();

Это очень простой пример наследования, наследование означает наследование некоторых свойств от родителя, здесь класс FootBall наследует такие свойства, как координаты x, y, от класса Ball, а также добавляет к классу свое собственное свойство «цвет».

Если вы видите приведенный выше вывод, значит, экземпляр b2 имеет свойства now, x, y, color и методы moveBall, startMovement и getColor в экземпляре. Классы теперь встроены в собственную реализацию большинства современных браузеров, но, как описано выше, они в основном преобразуются в синтаксис, указанный выше, как указано в разделе Функции стрелок. Для получения дополнительной информации вы можете попробовать Babel REPL и преобразовать его в функции (старый синтаксис)

Статический метод—

Да, вы правильно расслышали, статические методы, которые мы использовали для создания на других языках программирования, таких как C #, Java и т. Д. Как мы уже упоминали выше, истинные классы ES6, они могут определять статические методы в классе. Статические методы определяются с помощью ключевого слова static и недоступны в объекте экземпляра, созданном из этого класса, см. Его действие ниже.

class FootBall extends Ball {
  constructor(x, y, color) {
   super(x, y);
   this.color = color;  
  }
  getColor() {
    console.log("color", this.color);
    return this.color;
  }
  
  static version() {
    return "1.2.3";
  }
}
FootBall.version();

В основном он используется для добавления любого поведения в класс, а не в экземпляр класса.

Мы пытаемся получить доступ к методу версии, созданному для объекта экземпляра, но он выдает ошибку и доступен только через класс. Это означает, что мы не можем использовать это внутри статического метода.

Получатель / установщик -

Как мы видим, мы определили метод getColor в классе для получения цвета объекта FootBall. Мы можем легко преобразовать его в свойство, а не в метод. Он будет определен как метод, но вызываться как значение свойства, посмотрите его в действии.

class FootBall extends Ball {
  constructor(x, y, color = '') {
   super(x, y);
   this.color = color;  
  }
  get color() {
    return this.color;
  }
  set color(_color) {
    this.color = _color;
  }
  static version() {
    return "1.2.3";
  }
}
const b2 = new FootBall(12, 12);
b2.color = "Red";
console.log(b2.color);

Как вы можете видеть, теперь мы определили геттер и свойство сеттера для получения и установки значения цвета. См. Последние три строки кода, упомянутого выше, теперь они преобразованы в синтаксис на основе свойств, а не на функции.

Несколько преимуществ использования геттера / сеттера, первое из которых вы уже видели выше, еще одно преимущество заключается в том, что вы можете использовать другие свойства класса и получить новый, или если вы хотите добавить какие-либо проверки базового уровня для свойств при настройке. Ярким примером, который вы можете найти, является, например, у нас есть класс, имеющий два свойства firstName и lastName, и мы хотим создать новое свойство fullName, тогда мы можем создать геттер, чтобы легко получить это свойство.

class Person {
  constructor(fName, lName) {
   this.firstName = fName;
   this.lastName = lName;
  }
  get fullName() {
   return this.firstName + ' ' + this.lastName;
  }
}
const p1 = new Person("Amit", "Chawla");
console.log(p1.fullName);

То, что вы прочитали… (Быстрая редакция)

  • Истинные классы в javascript теперь присутствуют, проверьте поддержку браузера здесь.
  • Мы можем легко унаследовать от родительского класса, а наследование в javascript теперь очень просто, как и в других языках программирования.
  • Как классы переносятся в синтаксис ECMA 5, если они не поддерживаются браузером, использующим Babel, мы их переносим.
  • Статические методы также возможны, и внутри этого метода контекст недоступен, потому что этот метод существует только в определении класса.
  • Getter / Setter упрощает жизнь разработчика, создавая производные свойства, и мы также можем добавлять правила проверки при установке некоторого свойства.

Разложить и отдохнуть

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

Много теории 😠, я понимаю разочарование. Но не волнуйтесь, мы рассмотрим и то, и другое в действии. А теперь приступим к кодированию.

Распространение - Прежде всего, разберитесь с оператором распространения.

const array1 = [1,2,3,4,5];
const array2 = [6,7,8,9];
const array3 = [...array1, ...array2];

Что происходит 😜 Мы создали две переменные массива и соединили их в третью. поэтому этот оператор ... распространил значения в третий массив. Это означает, что задача оператора распространения заключается в распределении значений.

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

const obj1 = {
  name: "Amit Chawla",
  age: 28
}
const obj2 = {
  nationality: "INDIAN",
  place: "Haryana"
}
const obj3 = {
  ...obj1,
  ...obj2
}
console.log(obj3);

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

const obj1 = {
  name: "Amit Chawla",
  age: 28
}
const obj2 = {
  nationality: "INDIAN",
  place: "Haryana", 
  age: 29
}
const obj3 = {
  ...obj1,
  ...obj2
}
console.log(obj3);

Как видите, возраст изменен на 29.

Spread также можно использовать для отправки аргументов в функцию, например, если у нас есть массив значений и мы хотим отправить в функцию аргументы, разделенные запятыми.

const arr1 = [1,2,3];
const fn = function (a, b, c) {
  console.log(a, b, c);
}
fn(...arr1);

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

Отдых -

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

const fn = function (...args) {
  console.log(args);
}
fn(1,2,3);

Здесь ... используется как параметр rest, получает значения как параметр и преобразуется в массив. Итак, в мире программирования мы сталкиваемся со многими случаями (особенно в javascript), когда мы не уверены, сколько функций аргументов получат, или, может быть, какой-то вариант использования, который вы знаете заранее, например, первые два параметра и остальные неизвестны, так что это в основном используется, поэтому и получил название.

const fn = function (name, age, ...subjects) {
  console.log(name, age, subjects);
}
fn("Amit Chawla", 28, "Maths", "Physics", "Chemistry");

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

const fn = function (param1, param2, ...rest) {
   .......
}

Есть одно правило: параметр rest всегда является последним параметром функции.

Деструктуризация

ES6 имеет несколько коротких синтаксисов, таких как стрелочные функции, которые мы обсуждали выше. Точно так же деструктуризация является одним из них. Какую проблему он решает. Сначала мы обсудим проблему, с которой сталкивается каждый разработчик.

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

// Object
const person = {
  firstName: "Amit",
  lastName: "Chawla",
  age: 33
}
// If we have an object like above and we want to extract some 
// properties from it like firstName and lastName
const firstName = person.firstName;
const lastName = person.lastName;
// Array
const person = ["Amit", "Chawla", 33];
// This is not a realistic example, but if are having some kind of // similar array, from which you need to extract on basis of index
const firstName = person[0];
const lastName = person[1];

Это кажется прекрасным, каждый программист знает эти вещи, довольно просто, но когда нам нужно извлечь из длинного объекта / массива, тогда это также кажется довольно сложным. Поэтому для решения этой проблемы в ES6 есть функция под названием деструктуризация. Судя по названию, можно из чего извлечь. Давайте посмотрим, как новый синтаксис поможет разработчику.

// Object
const person = {
  firstName: "Amit",
  lastName: "Chawla",
  age: 33
}
// If we have an object like above and we want to extract some 
// properties from it like firstName and lastName
const { firstName, lastName } = person;
// Array
const person = ["Amit", "Chawla", 33];
// This is not a realistic example, but if are having some kind of // similar array, from which you need to extract on basis of index
const [firstName, lastName] = person;

Итак, в приведенном выше примере показаны два основных типа деструктуризации с объектом и с массивом.

С помощью деструктурирования объекта мы создали две переменные с именами firstName и lastName, а также присвоим этим переменным значения из объекта person в правой части выражения, сопоставив их с тем же именем свойства.

Точно так же с деструктуризацией массива мы создали две переменные, которые будут содержать значения из правой части массива на основе индексов.

Теперь у вас в голове возникает один вопрос: с помощью предыдущего синтаксиса мы можем создавать переменные с моими собственными именами, но теперь мы должны следовать только именам свойств объекта. Ура, стандарт ES6 тоже предлагает решение этой проблемы. Посмотрите на это в действии ниже на том же примере.

const { firstName: fName, lastName: lName } = person;

Это объектный синтаксис 😠, вот что здесь происходит. Нет, это не литерал объекта, литералы объекта всегда находятся справа от равенства, поэтому здесь значения firstName и lastName будут выбираться из объекта person через имя свойства. сопоставление и будут созданы переменные fName и lName, и этим переменным будут присвоены значения. Таким образом, они не являются обязательными, как указано в предыдущем примере. Вы можете подняться на столько уровней, сколько захотите, и можете иметь комбинацию, давайте посмотрим на более сложный.

// Object
const person = {
  firstName: "Amit",
  lastName: "Chawla",
  friends: ["Jon", "Danny", "Abhi"],
  attributes: {
    age: 33,
    birthday: "17th Feb"
  }
}
// If we want to just find out the firstName, first friend and 
// birthday from this object.
const { firstName: fName, friends:[firstFriend], attributes: { birthday }} = person;
console.log(fName, firstFriend, birthday);

Здесь он взял firstName из person.firstName, создал переменную fName и присвоил ей значение. Точно так же в друзьях происходит деструктуризация массива, и мы выбрали значение из первого индекса, создали и присвоили переменной с именем firstFriend. с днем ​​рождения это еще один пример вложенного уровня.

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

Новый литерал объекта

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

const name = "Amit Chawla";
const age = 28;
// in old way if you want to create a new object with name and age // properties and value used from above variables, here is the code
const person = {
  name: name,
  age: 28
}
// In the new syntax, you can make shorter notation.
const person = {
  name,
  age
}

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

Что вы узнали на данный момент (Быстрая редакция)

  • Оператор распространения может использоваться для распространения значений массива / объекта на другой массив / объект.
  • Оператор распространения также может использоваться для отправки аргументов в функцию.
  • Оператор rest используется для получения аргументов, как раз напротив спреда. Таким образом, он будет использоваться для получения аргументов в массив.
  • Основной вариант использования оператора Rest - это когда вы заранее знаете несколько параметров и остальных параметров, которые необходимо получить в массиве.
  • Оператор rest может использоваться только как последний параметр функции.
  • Мы научились деструктуризации для создания ряда переменных из объекта или массива, с вложенными уровнями, что легко возможно.
  • Мы изучили новый синтаксис литерала Objet, в котором объект может быть создан с новым более коротким синтаксисом.

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

До сих пор мы в основном говорили о массивах, объектах и ​​функциях. Но строки также являются важной частью любого вида разработки, и сделать их динамическими на таком языке, как javascript, с помощью оператора + очень сложно.

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

const name = "Amit Chawla";
const salutation = "Hello " + name;
console.log(salutation);

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

const name = "Amit Chawla";
const salutation = `Hello ${name}`;
console.log(salutation);

Итак, что это за `` (обратная кавычка сразу под клавишей esc). Это новый синтаксис записи динамических строк. `$ {name}`, Блок будет заменен внутри строки значением имени, определенным выше, и вернет строку «Hello Amit Chawla». Это очень простой пример строкового литерала, но если у вас есть несколько переменных в строке. Посмотрим, как это решит эту проблему.

const name = "Amit Chawla";
const event = "Good Morning !!!"
const salutation = "Welcome " + name + ", " + event;
console.log(salutation);
const salutation1 = `Welcome ${name}, ${event}`;
console.log(salutation1);

В приведенном выше примере у нас есть несколько переменных, и для объединения нам нужно использовать оператор + три раза. Ваш реальный вариант использования может быть более сложным.

  • Строковый литерал может использоваться для многострочных строк, в отличие от обычной строки, которую нам нужно объединить с оператором + для многострочной строки.
  • В $ { ‹можно использовать любое выражение javascript› }. Это может быть переменная или любая функция, возвращающая строковое значение.
const getName = function(firstName, lastName) {
  return `${firstName} ${lastName}`;
}
const salutation = `Hello ${getName("Amit", "Chawla")}`;
console.log(salutation);

Это еще один пример, в котором вычисляется функциональное выражение getName (), в котором используется строковый литерал для объединения строкового литерала, который затем будет использоваться для объединения для создания приветствия. Это доказывает, что здесь в строковом литерале можно использовать любое выражение javascript.

В основном мы обсуждали динамическую строковую часть строкового литерала, которая является наиболее мощным вариантом использования, но вы можете сделать больше со строковыми литералами. Еще одна функция расширенного уровня строкового литерала - это тегированный шаблон. Мы рассмотрим это в другом уроке. Если вам все еще интересно узнать об этом подробнее, вы можете посетить здесь.

Значения по умолчанию

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

Вы должны писать такой код, в котором вы не уверены, что значение переменной придет или нет, и как разработчик нам нужно добавить какое-то значение по умолчанию (или резервное значение).

const createSalutation = function (name) {
  return `Hello ${name}`;
}
console.log(createSalutation());

Итак, мы получаем Hello undefined, и как разработчик нам нужно добавить здесь запасной вариант, чтобы наша программа не отображала undefined, по крайней мере, если значения не приходящий. Обходной путь (или резерв):

const createSalutation = function (name) {
  return `Hello ${name || ''}`;
}
console.log(createSalutation());

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

const createSalutation = function (name = '') {
  return `Hello ${name}`;
}
console.log(createSalutation());

Итак, мы удалили OR || из строкового литерала и добавили в источнике на уровне функции с помощью name = ''. Это новый синтаксис значения по умолчанию, но есть некоторые правила в отношении значений по умолчанию.

  • Если вы передадите значение null или любое другое значение falsy, кроме undefined, оно будет рассматриваться как значение, потому что оно не заменяет то, что делает оператор OR || для любого вида ложного значение. Значение по умолчанию работает только для неопределенного.

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

Мы также можем использовать значения по умолчанию с деструктуризацией, давайте посмотрим, как это сделать.

const person = { firstName: "Amit" };
const { firstName, lastName } = person;
console.log(firstName, lastName);

lastName появляется как undefined, потому что объект person не имеет свойства lastName, поэтому здесь нам может помочь запасное значение по умолчанию.

const person = { firstName: "Amit" };
const { firstName = '', lastName = '' } = person;
console.log(firstName, lastName);

Я предлагаю вам начать использовать их в своем коде с сегодняшнего дня, если они не используются в настоящее время. Просто убедитесь, что версия браузера поддерживает их здесь.

Если вам понравился этот пост, нажмите хлопать в ладоши 👏 столько, сколько вы думаете, будет достаточно 😄 Любой отзыв, пожалуйста, напишите в ответ 💭