forked from pirple/Keeping-Up-With-the-Javascripts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Template Literals.html
executable file
·113 lines (79 loc) · 2.22 KB
/
Template Literals.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<!--
Template Literals
-->
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="myDiv">
</div>
<div id="pizzaDiv">
</div>
<script id="jsbin-javascript">
// Template Literals
/*
- String literals allowing embedded expressions
- Makes it easier to create multiline strings and
allows string interpolation
- Enclosed in back-ticks (`String goes here`) instead
of single quotes('') or double quotes("")
-Can contain placeholders
*/
var myFirstName = "Chris";
var myLastName = "Jones";
var myAge = "30";
console.log("Hello," + " " + myFirstName + " " + myLastName + ". I am" + " " + myAge + " " + "years old.");
var myNewList = "\
<ul>\n\
<li>I am item 1</li>\n\
<li>I am item 2</li>\n\
<li>I am item 3</li>\n\
<li>I am item 4</li>\n\
</ul>";
// ES6 below
const myOtherNewList =
`<ul>
<li>I am es6 number 1!</li>
<li>I am item 2</li>
<li>I am item 3</li>
<li>I am #4</li>
</ul>`;
const myDiv = document.getElementById("myDiv");
myDiv.innerHTML = myOtherNewList;
const first = `Sally`;
const last = `Smith`;
const age = 52;
const fullNameAndAge = `${first} ${last}, age: ${age}`
console.log(`Hello ${fullNameAndAge}`)
console.log(`My name is "Chris"`);
const isTrue = true;
console.log(`Is true: ${!isTrue}?`);
const dateNow = new Date();
console.log(`Today's is: ${dateNow.toLocaleString()}`);
console.log(`Result is: ${50 * 100}`);
const pizzaToppings = ["cheese", "mushrooms", "sauce", "pepperoni", "pineapple"];
const myPizzaArticle = (
`<article>
<h1>Pizza Ingredients</h1>
<ul>
${pizzaToppings.map((ingredient) => `<li>${ingredient}</li>`).join("\n ")}
</ul>
</article>`
);
console.log(myPizzaArticle);
const pizzaDiv = document.getElementById("pizzaDiv");
pizzaDiv.innerHTML = myPizzaArticle;
function templateParser(arrayOfStrings, expression1, expression2) {
console.log(`"${arrayOfStrings}", "${expression1}", "${expression2}"`);
}
const person = "Chris";
const personAge = 50;
const myTemplateLiteral = templateParser`I am ${person}, aged: ${personAge}`;
</script>
</body>
</html>