了解 JavaScript 中的模板字面意义

1const single = 'Every day is a good day when you paint.'

1const double = "Be so very light. Be a gentle whisper."

1// Escaping a single quote in a single-quoted string
2const single = '"We don\'t make mistakes. We just have happy accidents." - Bob Ross'
3
4// Escaping a double quote in a double-quoted string
5const double = "\"We don't make mistakes. We just have happy accidents.\" - Bob Ross"
6
7console.log(single);
8console.log(double);

1[secondary_label Output]
2"We don't make mistakes. We just have happy accidents." - Bob Ross
3"We don't make mistakes. We just have happy accidents." - Bob Ross

1const template = `Find freedom on this canvas.`

1const template = `"We don't make mistakes. We just have happy accidents." - Bob Ross`

1const template = `Template literals use the \` character.`

1const address = 
2  'Homer J. Simpson' + 
3  '742 Evergreen Terrace' + 
4  'Springfield'

1[secondary_label Output]
2Homer J. Simpson742 Evergreen TerraceSpringfield

1const address =
2  'Homer J. Simpson\
3  742 Evergreen Terrace\
4  Springfield'

1[secondary_label Output]
2Homer J. Simpson 742 Evergreen Terrace Springfield

1const address = 
2  'Homer J. Simpson\n' + 
3  '742 Evergreen Terrace\n' + 
4  'Springfield'

1[secondary_label Output]
2Homer J. Simpson
3742 Evergreen Terrace
4Springfield

1const address = `Homer J. Simpson
2742 Evergreen Terrace
3Springfield`

1[secondary_label Output]
2Homer J. Simpson
3742 Evergreen Terrace
4Springfield

1const address = `Homer J. Simpson
2                 742 Evergreen Terrace
3                 Springfield`

1[secondary_label Output]
2Homer J. Simpson
3                 742 Evergreen Terrace
4                 Springfield

1const method = 'concatenation'
2const dynamicString = 'This string is using ' + method + '.'

1[secondary_label Output]
2This string is using concatenation.

1const method = 'interpolation'
2const dynamicString = `This string is using ${method}.`

1[secondary_label Output]
2This string is using interpolation.

1function createOAuthString(host, clientId, scope) {
2  return host + '/login/oauth/authorize?client_id=' + clientId + '&scope=' + scope
3}
4
5createOAuthString('https://github.com', 'abc123', 'repo,user')

1[secondary_label Output]
2https://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user

1function createOAuthString(host, clientId, scope) {
2  return `${host}/login/oauth/authorize?client_id=${clientId}&scope=${scope}`
3}
4
5createOAuthString('https://github.com', 'abc123', 'repo,user')

1[secondary_label Output]
2https://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user

1const menuItem = (url, link) =>
2  `
3<li>
4  <a href="${url}">${link}</a>
5</li>
6`.trim()
7
8menuItem('https://google.com', 'Google')

1[secondary_label Output]
2<li>
3  <a href="https://google.com">Google</a>
4</li>

1const sum = (x, y) => x + y
2const x = 5
3const y = 100
4const string = `The sum of ${x} and ${y} is ${sum(x, y)}.`
5
6console.log(string)

1[secondary_label Output]
2The sum of 5 and 100 is 105.

1const age = 19
2const message = `You can ${age < 21 ? 'not' : ''} view this page`
3console.log(message)

1[secondary_label Output]
2You can not view this page

1function tag(strings, ...expressions) {
2  console.log(strings)
3  console.log(expressions)
4}

1const string = tag`This is a string with ${true} and ${false} and ${100} interpolated inside.`

1[secondary_label Output]
2(4) ["This is a string with ", " and ", " and ", " interpolated inside."
3(3) [true, false, 100]

1function returnsNull(strings, ...expressions) {
2  return null
3}
4
5const string = returnsNull`Does this work?`
6console.log(string)

1[secondary_label Output]
2null

 1function bold(strings, ...expressions) {
 2  let finalString = ''
 3
 4  // Loop through all expressions
 5  expressions.forEach((value, i) => {
 6    finalString += `${strings[i]}<strong>${value}</strong>`
 7  })
 8
 9  // Add the last string literal
10  finalString += strings[strings.length - 1]
11
12  return finalString
13}
14
15const string = bold`This is a string with ${true} and ${false} and ${100} interpolated inside.`
16
17console.log(string)

1[secondary_label Output]
2This is a string with <strong>true</strong> and <strong>false</strong> and <strong>100</strong> interpolated inside.

 1import gql from 'graphql-tag'
 2
 3// A query to retrieve the first and last name from user 5
 4const query = gql`
 5  {
 6    user(id: 5) {
 7      firstName
 8      lastName
 9    }
10  }
11`

1import styled from 'styled-components'
2
3const Button = styled.button`
4  color: magenta;
5`
6
7// <Button> can now be used as a custom component

1const rawString = String.raw`I want to write /n without it being escaped.`
2console.log(rawString)

1[secondary_label Output]
2I want to write /n without it being escaped.