Это 5-й эпизод в моей серии изучения JavaScript из Mozilla Docs. Друг сказал мне, что лучший способ научиться кодировать — это не пошаговые руководства по кодированию для создания этих модных продуктов или покупка курсов, а перейти прямо к документации и прочитать ее. И вот я здесь! Читая эти документы, я буду делать это, когда при создании моего приложения возникнут трудности, поэтому лучше всего мне с ними ознакомиться. Так или иначе, позвольте мне объяснить вам шаблонные литералы.
Обратите внимание на литералы шаблонов. На данный момент я почти закончил с литералами. Вот как я себя чувствовал в то время, но вернувшись через день, я чувствую, что хочу снова застрять! Литералы храма заключены в обратную галочку (`) вместо стандартные двойные или одинарные кавычки.
Они предоставляют что-то, называемое синтаксическим сахаром (термин, используемый в программировании для описания функций языка, которые предназначены для облегчения чтения или выражения, делают вещи более приятными! Они подчеркивают ясность, краткость или визуальную привлекательность) для создания строк. Таким образом, в контексте JavaScript говорится, что он обеспечивает более удобный и читаемый способ объединения строк. Как? Давайте сравним, как это создает эффективность. Без литералов шаблона:
var name = "John";
console.log("Hello, " + name + "!");
С литералами шаблонов:
let name = "John";
console.log(`Hello, ${name}!`);
Что-то, что литералы Template позволяют вам, где двойные и одинарные кавычки не позволяют, через многострочные строки. Вот пример:
// Multiline strings `In JavaScript, template strings can run over multiple lines, but double and single quoted strings cannot.`
Теперь давайте перейдем к более сложной форме литерала шаблона, тэговому шаблону. Так что давайте не будем забывать, шаблонный литерал — это способ конкатенации (объединения или связывания) строк и выражений (то есть переменных, функций) внутри строки. Хорошо, теперь шаблон с тегами развивает эту концепцию немного дальше. Это позволяет вам передать литерал шаблона через функцию (это «тег»), прежде чем он будет обработан в окончательную строку (остайтесь со мной здесь). Эта функция тега теперь может манипулировать строкой и выражениями любым способом до вывода окончательного результата. Эта функция вызывается путем размещения имени функции перед литералом шаблона, поэтому: ‘tagFunction`Template literal`.
Например:
function myTag(strings, ...values) {
let str = "";
for (let i = 0; i < strings.length; i++) {
str += strings[i];
if (i < values.length) {
str += values[i] * 2; // We're doubling every expression value.
}
}
return str;
}
let a = 5;
let b = 10;
console.log(myTag`Sum: ${a + b}`); // Output: "Sum: 30"
Прежде чем я объясню, позвольте мне поговорить с вами об «…», который называется оператором спреда. Он используется для расширения итерируемых объектов на несколько элементов. Это похоже на использование цикла for для перебора всего! (Просто сокращенный способ сделать это) Но обратите внимание, он просто распространяет данные, вы ничего не можете сделать с каждой итерацией, как с циклом, который вы можете. Итак, теперь вы, вероятно, можете собрать воедино то, что происходит в myTag().
В любом случае, я хотел научить вас, что означает синтаксический анализ, поскольку они использовали его в документации Mozilla для определения шаблонов с тегами. Они сказали: «Тегированные шаблоны — это компактный синтаксис для указания литерала шаблона вместе с вызовом функции «тег» для его разбора». Теперь на примере, который я показал вам, я попытаюсь объяснить вам это. В этом контексте синтаксический анализ относится к действию, которое выполняет функция тега. Он «разбирает» литерал шаблона, разбивая его на отдельные части.
Тут я запутался, потому что, честно говоря, я не знал точно, что происходит и что говорится. Я попросил GPT действительно попытаться объяснить все, что происходит в коде, потому что часть «функции myTag (строки, … значения)» меня действительно смущала. Я действительно не знал, что происходит, например, мы определили строковый вызов str, а затем выполнили итерацию в зависимости от длины строк. Итак, он разбил его, и в первой строке было сказано, что функция myTag определяется двумя параметрами: «строки» и «… значения». «strings» — это массив литеральных частей строки шаблона, а «…values» — это массив значений выражений внутри литералов шаблона (${}). Оператор распространения по значениям будет означать, что этот параметр соберет все оставшиеся аргументы в массив.
В любом случае, документация дает большой пример использования литералов шаблонов, поэтому я покажу вам его, чтобы получить лучшее представление о более эффективном использовании литералов шаблонов. Прочтите его, и я не думаю, что буду вдаваться в подробности, так как визуально он достаточно понятен (хотя выглядит довольно устрашающе):
const formatArg = (arg) => {
if (Array.isArray(arg)) {
// Print a bulleted list
return arg.map((part) => `- ${part}`).join("\n");
}
if (arg.toString === Object.prototype.toString) {
// This object will be serialized to "[object Object]".
// Let's print something nicer.
return JSON.stringify(arg);
}
return arg;
};
const print = (segments, ...args) => {
// For any well-formed template literal, there will always be N args and
// (N+1) string segments.
let message = segments[0];
segments.slice(1).forEach((segment, index) => {
message += formatArg(args[index]) + segment;
});
console.log(message);
};
const todos = [
"Learn JavaScript",
"Learn Web APIs",
"Set up my website",
"Profit!",
];
const progress = { javascript: 20, html: 50, css: 10 };
print`I need to do:
${todos}
My current progress is: ${progress}
`;
// I need to do:
// - Learn JavaScript
// - Learn Web APIs
// - Set up my website
// - Profit!
// My current progress is: {"javascript":20,"html":50,"css":10}
По-видимому, мы можем просто изменить печать на этот фрагмент кода, поскольку помеченные литералы шаблонов — это просто сахар вызовов функций, поэтому мы можем переписать вышеприведенное как эквивалентный вызов функции:
print(["I need to do:\n", "\nMy current progress is: ", "\n"], todos, progress);
Напоминаем, что print() — это созданная нами функция тега шаблона (а не встроенная функция). Это может напоминать интерполяцию в стиле console.log:
console.log("I need to do:\n%o\nMy current progress is: %o\n", todos, progress);
Вы можете видеть, что помеченный шаблон читается более естественно, чем традиционная функция «форматирования», где переменные и сам шаблон должны быть объявлены отдельно. Я не ссылаюсь на тот вызов функции без сахара, который я показал, я говорю об этой части:
print`I need to do:
${todos}
My current progress is: ${progress}
`;
Видите, в конце нет таких переменных, как todos и progress, как в операторе console.log? Вот что я имею в виду, мне не нужно было объявлять переменные отдельно, они встроены внутри тега.
Конец
Эти посты, которые я делаю, довольно сырые. Я не заостряю их, я просто даю вам свое понимание того, что я читаю на ходу, потому что я не собираюсь слишком зацикливаться на этом, так как у меня нет большого количества времени. Хотя мне нравится этот сырой стиль ведения блога, я имею в виду, что, очевидно, я хочу, чтобы он был читабельным, но я не хочу, чтобы это выглядело так, как будто я делаю дорогостоящую презентацию. В любом случае, я доволен тем, что делаю эти обновления на носителе, а не на другой платформе, такой как YouTube, потому что создание и редактирование видео моего обучения, вероятно, займет очень много времени, а редактирование определенно займет некоторое время, к которому я не думаю, что этот тип контента действительно выгнал после, или, может быть, это так? Хотя я так не думаю. Дайте мне знать! Во всяком случае, в следующем я перейду к последнему разделу «Грамматика и типы», «специальные символы».
