Tailwind CSS 原始碼中的 String.raw。

本文我們分析一下Tailwindcss源碼中String.raw的用法。

String.raw

MDN 文件說：

「String.raw()靜態方法是模板文字的標籤函數。

這類似於 Python 中的 r 前綴，或 C# 中字串文字的 @ 前綴。

它用於獲取模板文字的原始字串形式 - 即替換

（例如 ${foo}）被處理，但轉義序列（例如 n）未被處理。 “

範例1：

以下範例摘自MDN：

// Create a variable that uses a Windows
// path without escaping the backslashes:
const filePath = String.raw`C:\Development\profile\aboutme.html`;
console.log(`The file was uploaded from: ${filePath}`);
// Expected output: "The file was uploaded from: C:\Development\profile\aboutme.html"

上面範例的執行結果如下所示：

> "The file was uploaded from: C:\Development\profile\aboutme.html"

範例2：

如果您使用以下程式碼在沒有 String.raw 的情況下執行相同的範例：

// Create a variable that uses a Windows
// path without escaping the backslashes:
const filePath = `C:\Development\profile\aboutme.html`;
console.log(`The file was uploaded from: ${filePath}`);
// Expected output: "The file was uploaded from: C:\Development\profile\aboutme.html"

結果如下圖：

> "The file was uploaded from: C:Developmentprofileaboutme.html"

範例3：

如果您使用以下程式碼執行涉及 n 的相同範例：

const filePathWithoutStringRaw = `\nC:\Development\profile\aboutme.html`;
const filePathWithStringRaw = String.raw`\nC:\Development\profile\aboutme.html`;
console.log("filePathWithoutStringRaw:", filePathWithoutStringRaw)
console.log("*******")
console.log("filePathWithStringRaw:", filePathWithStringRaw)

結果如下圖：

> "filePathWithoutStringRaw:" "
C:Developmentprofileaboutme.html"
> "*******"
> "filePathWithStringRaw:" "\nC:\Development\profile\aboutme.html"

Tailwindcss 如何使用 String.raw：

ui.spec.ts 測試檔案將 String.raw 指派給 html 和 css。

發現很多用ui.spec.ts寫的測驗都使用了html

讓我們仔細看看這個測試程式碼：

for (let [classes, expected] of [
 [
 'bg-linear-to-r from-red-500',
 'linear-gradient(to right, rgb(239, 68, 68) 0%, rgba(0, 0, 0, 0) 100%)',
 ],
 [
 'bg-linear-to-r via-red-500',
 'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(239, 68, 68) 50%, rgba(0, 0, 0, 0) 100%)',
 ],
 [
 'bg-linear-to-r to-red-500',
 'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(239, 68, 68) 100%)',
 ],
 [
 'bg-linear-to-r from-red-500 to-blue-500',
 'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(59, 130, 246) 100%)',
 ],
 [
 'bg-linear-to-r via-red-500 to-blue-500',
 'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(239, 68, 68) 50%, rgb(59, 130, 246) 100%)',
 ],
 [
 'bg-linear-to-r from-red-500 via-green-500 to-blue-500',
 'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(34, 197, 94) 50%, rgb(59, 130, 246) 100%)',
 ],
 [
 'bg-linear-[to_right,var( - color-red-500),var( - color-green-500),var( - color-blue-500)]',
 'linear-gradient(to right, rgb(239, 68, 68), rgb(34, 197, 94), rgb(59, 130, 246))',
 ],
]) {
 test(`background gradient, "${classes}"`, async ({ page }) => {
   let { getPropertyValue } = await render(
   page,
   html`<div id="x" class="${classes}">Hello world</div>`,
   )
   expect(await getPropertyValue('#x', 'background-image')).toEqual(expected)
 })
}

看到在 for 迴圈中定義的整個陣列很有趣。

html`<div id="x" class="${classes}">Hello world</div>`,

${classes} 被替換為下列陣列的第一項：

[<br>
 'bg-linear-to-r from-red-500',<br>
 'linear-gradient(to right, rgb(239, 68, 68) 0%, rgba(0, 0, 0, 0) 100%)',<br>
],<br>

關於我們：

在 Think Throo，我們的使命是教授開源專案中使用的高階程式碼庫架構概念。

透過在 Next.js/React 中練習高階架構概念，將您的編碼技能提高 10 倍，學習最佳實踐並建立生產級專案。

我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）

我們也提供網頁開發和技術寫作服務。請透過hello@thinkthroo.com聯絡我們以了解更多資訊！

參考文獻：

1. https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/tests/ui.spec.ts

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw

3. https://stackoverflow.com/questions/34772762/what-are-the-actual-uses-of-es6-raw-string-access

以上是Tailwind CSS 原始碼中的 String.raw。的詳細內容。更多資訊請關注PHP中文網其他相關文章！