Tailwind CSS ソース コードの String.raw。

この記事では、Tailwindcss ソース コードでの String.raw の使用法を分析します。

文字列.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 に割り当てます。

html は、ui.spec.ts で書かれた多くのテストで使用されていることがわかります

このテストコードを詳しく見てみましょう:

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 (スターを付けてください!)

Web 開発およびテクニカル ライティング サービスも提供しています。詳細については、

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 中国語 Web サイトの他の関連記事を参照してください。