JavaScript >> Javascript 文檔 >  >> JavaScript

了解 JavaScript 中的模板文字

這篇文章最初是為 DigitalOcean 寫的。

簡介

ECMAScript 規範 (ES6) 的 2015 版添加了 模板文字 到 JavaScript 語言。模板文字是在 JavaScript 中創建字符串的一種新形式,它添加了許多強大的新功能,例如更輕鬆地創建多行字符串以及使用佔位符在字符串中嵌入表達式。此外,一個名為標記模板文字的高級功能 允許您對字符串中的表達式執行操作。所有這些功能都增加了您作為開發人員的字符串操作選項,讓您更輕鬆地生成可用於 URL 或自定義 HTML 元素的函數的動態字符串。

在本文中,您將了解單/雙引號字符串和模板文字之間的區別,貫穿聲明不同形狀字符串的各種方式,包括多行字符串和根據變量值變化的動態字符串或表達。然後,您將了解標記模板並查看一些使用它們的實際項目示例。

聲明字符串

本節將回顧如何使用單引號和雙引號聲明字符串,然後將展示如何對模板文字進行同樣的操作。

在 JavaScript 中,字符串可以用單引號 (' ' ):

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

字符串也可以用雙引號 (" " ):

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

在 JavaScript 中,單引號或雙引號字符串之間沒有重大區別,這與其他可能允許 插值 的語言不同 在一種類型的字符串中,但不是另一種。在這種情況下,插值是指將佔位符評估為字符串的動態部分。

單引號或雙引號字符串的使用主要歸結為個人喜好和約定,但結合使用,每種類型的字符串只需要轉義自己的引號類型:

// Escaping a single quote in a single-quoted string
const single = '"We don\'t make mistakes. We just have happy accidents." - Bob Ross'

// Escaping a double quote in a double-quoted string
const double = "\"We don't make mistakes. We just have happy accidents.\" - Bob Ross"

console.log(single)
console.log(double)

log() 的結果 這裡的方法會將相同的兩個字符串打印到控制台:

"We don't make mistakes. We just have happy accidents." - Bob Ross
"We don't make mistakes. We just have happy accidents." - Bob Ross

另一方面,模板文字是通過用反引號字符或重音符號(` ):

const template = `Find freedom on this canvas.`

它們不需要轉義單引號或雙引號:

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

但是,它們仍然需要避開反引號:

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

模板文字可以做常規字符串可以做的所有事情,因此您可以用它們替換項目中的所有字符串並具有相同的功能。但是,代碼庫中最常見的約定是僅在使用模板文字的附加功能時才使用模板文字,並且對所有其他簡單字符串始終使用單引號或雙引號。如果由其他開發人員檢查,遵循此標準將使您的代碼更易於閱讀。

現在您已經了解瞭如何使用單引號、雙引號和反引號聲明字符串,您可以繼續了解模板文字的第一個優勢:編寫多行字符串。

多行字符串

在本節中,您將首先了解在 ES6 之前聲明多行字符串的方式,然後了解模板字面量如何使這變得更容易。

最初,如果您想在文本編輯器中編寫一個跨越多行的字符串,您將使用連接運算符。然而,這並不總是一個直截了當的過程。以下字符串連接似乎跨越了多行:

const address = 'Homer J. Simpson' + '742 Evergreen Terrace' + 'Springfield'

這可能允許您將字符串分成更小的行並將其包含在文本編輯器中的多行中,但它對字符串的輸出沒有影響。在這種情況下,字符串都將在一行上,並且不會用換行符或空格分隔。如果您記錄了 address 到控制台,你會得到以下信息:

Homer J. Simpson742 Evergreen TerraceSpringfield

反斜杠字符 (\ ) 可用於將字符串延續到多行:

const address =
  'Homer J. Simpson\
  742 Evergreen Terrace\
  Springfield'

這會將任何縮進保留為空格,但字符串仍將位於輸出中的一行:

Homer J. Simpson  742 Evergreen Terrace  Springfield

使用換行符 (\n ),你可以創建一個真正的多行字符串:

const address = 'Homer J. Simpson\n' + '742 Evergreen Terrace\n' + 'Springfield'

登錄到控制台時,將顯示以下內容:

Homer J. Simpson
742 Evergreen Terrace
Springfield

然而,使用換行符來指定多行字符串可能是違反直覺的。相比之下,使用模板文字創建多行字符串可能更直接。無需連接、使用換行符或使用反斜杠。默認情況下,只需按 enter 並跨多行寫入字符串即可:

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

將此記錄到控制台的輸出與輸入相同:

Homer J. Simpson
742 Evergreen Terrace
Springfield

任何縮進都將被保留,因此如果不希望縮進字符串中的任何其他行,這一點很重要。例如,考慮以下內容:

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

雖然這種寫法可能會使代碼更易於閱讀,但輸出不會是:

Homer J. Simpson
                 742 Evergreen Terrace
                 Springfield

現在涵蓋了多行字符串,下一節將討論如何使用不同的字符串聲明將表達式插入到它們的值中。

表達式插值

在 ES6 之前的字符串中,使用連接來創建帶有變量或表達式的動態字符串:

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

當登錄到控制台時,這將產生以下內容:

This string is using concatenation.

使用模板文字,表達式可以嵌入到 佔位符 .佔位符由 ${} 表示 , 大括號內的任何內容都被視為 JavaScript,括號外的任何內容都被視為字符串:

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

dynamicString 登錄到控制台,控制台會顯示如下:

This string is using interpolation.

在字符串中嵌入值的一個常見示例可能是創建動態 URL。使用串聯,這可能很麻煩。例如,下面聲明了一個生成 OAuth 訪問字符串的函數:

function createOAuthString(host, clientId, scope) {
  return host + '/login/oauth/authorize?client_id=' + clientId + '&scope=' + scope
}

createOAuthString('https://github.com', 'abc123', 'repo,user')

記錄此函數將產生以下到控制台的 URL:

https://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user

使用字符串插值,您不再需要跟踪打開和關閉字符串以及連接運算符的位置。這是模板文字的相同示例:

function createOAuthString(host, clientId, scope) {
  return `${host}/login/oauth/authorize?client_id=${clientId}&scope=${scope}`
}

createOAuthString('https://github.com', 'abc123', 'repo,user')

這將具有與串聯示例相同的輸出:

https://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user

trim() 方法也可用於模板文字以刪除字符串開頭或結尾的任何空格。例如下面使用箭頭函數創建 HTML <li> 帶有自定義鏈接的元素:

const menuItem = (url, link) =>
  `
<li>
  <a href="${url}">${link}</a>
</li>
`.trim()

menuItem('https://google.com', 'Google')

結果將被修剪掉所有的空白,確保元素被正確渲染:

<li>
  <a href="https://google.com">Google</a>
</li>

可以對整個表達式進行插值,而不僅僅是變量,例如在這個兩個數字之和的示例中:

const sum = (x, y) => x + y
const x = 5
const y = 100
const string = `The sum of ${x} and ${y} is ${sum(x, y)}.`

console.log(string)

此代碼定義 sum 函數和變量 xy , 然後在字符串中同時使用函數和變量。記錄的結果將顯示如下:

The sum of 5 and 100 is 105.

這對於允許在字符串中使用條件的三元運算符特別有用:

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

此處記錄的消息將根據 age 的值而改變 大於或小於 21 .既然是19 在本例中,將記錄以下輸出:

You can not view this page

現在您已經了解了模板文字在用於插入表達式時如何有用。下一節將更進一步,通過檢查標記的模板文字來處理傳遞給佔位符的表達式。

標記模板文字

模板文字的一個高級特性是使用標記的模板文字 ,有時稱為模板標籤 .標記模板以 標記函數 開頭 解析模板文字,允許您更好地控制操作和返回動態字符串。

在本例中,您將創建一個 tag 函數用作對標記模板進行操作的函數。字符串字面量是函數的第一個參數,名為 strings 在這裡,插入到字符串中的任何表達式都使用剩餘參數打包到第二個參數中。您可以控制台輸出參數以查看它們將包含的內容:

function tag(strings, ...expressions) {
  console.log(strings)
  console.log(expressions)
}

使用 tag 函數作為標記模板函數並解析字符串如下:

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

由於您正在控制台記錄 stringsexpressions ,這將是輸出:

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

第一個參數,strings , 是一個包含所有字符串字面量的數組:

  • "This is a string with "
  • " and "
  • " and "
  • " interpolated inside."

還有一個raw 此參數在 strings.raw 處可用的屬性 ,其中包含未處理任何轉義序列的字符串。例如,/n 只是字符 /n 並且不會被轉義到換行符中。

第二個參數,...expressions , 是一個由所有表達式組成的剩餘參數數組:

  • true
  • false
  • 100

字符串文字和表達式作為參數傳遞給標記模板函數 tag .注意帶標籤的模板不需要返回字符串;它可以對這些值進行操作並返回任何類型的值。例如,我們可以讓函數忽略所有內容並返回 null ,就像在這個 returnsNull 功能:

function returnsNull(strings, ...expressions) {
  return null
}

const string = returnsNull`Does this work?`
console.log(string)

記錄 string 變量將返回:

null

可以在標記模板中執行的操作示例是對每個表達式的兩側應用一些更改,例如,如果您想將每個表達式包裝在 HTML 標記中。創建一個 bold 將添加 <strong> 的函數 和 </strong> 對每個表達式:

function bold(strings, ...expressions) {
  let finalString = ''

  // Loop through all expressions
  expressions.forEach((value, i) => {
    finalString += `${strings[i]}<strong>${value}</strong>`
  })

  // Add the last string literal
  finalString += strings[strings.length - 1]

  return finalString
}

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

console.log(string)

此代碼使用 forEach 循環 expressions 的方法 數組並添加粗體元素:

This is a string with <strong>true</strong> and <strong>false</strong> and <strong>100</strong> interpolated inside.

在流行的 JavaScript 庫中有一些標記模板文字的示例。 graphql-tag 庫使用 gql 標記模板,將 GraphQL 查詢字符串解析為 GraphQL 理解的抽象語法樹(AST):

import gql from 'graphql-tag'

// A query to retrieve the first and last name from user 5
const query = gql`
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`

另一個使用標記模板函數的庫是 styled-components ,它允許你從常規的 DOM 元素創建新的 React 組件並為它們應用額外的 CSS 樣式:

import styled from 'styled-components'

const Button = styled.button`
  color: magenta;
`

// <Button> can now be used as a custom component

內置 String.raw 方法也可以用於標記模板文字,以防止處理任何轉義序列:

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

這將記錄以下內容:

I want to write /n without it being escaped.

結論

在本文中,您回顧了單引號和雙引號字符串文字,並了解了模板文字和標記模板文字。模板文字通過在字符串中插入表達式並創建多行字符串而無需任何連接或轉義,使許多常見的字符串任務變得更簡單。模板標籤也是模板文字的一個有用的高級功能,許多流行的庫都使用過,例如 GraphQL 和 styled-components .

要了解有關 JavaScript 中字符串的更多信息,請閱讀如何在 JavaScript 中使用字符串以及如何在 JavaScript 中索引、拆分和操作字符串。


Tutorial JavaScript 教程
  1. 如何使用 chrome 進行數據抓取 - 數據科學

  2. AWS 提供的存儲服務

  3. 這就是您應該如何構建和發布現代 React 組件的方式!

  4. 不要再為在 Create React App 中擴展服務工作者而苦惱了。升級到第 4 版!

  5. 新的 Angular YouTube 播放器組件!

  6. 如何使正則表達式變為非貪婪?

  7. 高級 TypeScript 練習 - 問題 5

  1. Google 文檔季 - 1

  2. 移動端 Web 開發現狀

  3. 我如何在 Node.js 中對某些內容進行 URl 編碼?

  4. <a> 沒有 href=# 的腳本鏈接

  5. 🔥 使用 Firestore 的離線模式和 React Native 時需要考慮的幾個問題🪤

  6. D3v6 嵌套圖 - 嵌套連接()?

  7. 算法 202(我的面試問題):以 3 種方式對字謎進行分組

  1. 我第一次完成了 Hacktoberfest

  2. 使用 GitHub Pages 和 React 創建投資組合網站:第 2 部分

  3. Moment.js:一個更好的 JavaScript 日期庫

  4. 代碼藍色應用程序