String.raw dalam kod sumber CSS Tailwind.

Dalam artikel ini, kami menganalisis penggunaan String.raw dalam kod sumber Tailwindcss.

String.raw

Dokumentasi MDN mengatakan bahawa:

“Kaedah statik String.raw() ialah fungsi teg bagi literal templat.

Ini serupa dengan awalan r dalam Python, atau awalan @ dalam C# untuk literal rentetan.

Ia digunakan untuk mendapatkan bentuk rentetan mentah literal templat — iaitu, penggantian

(cth. ${foo}) diproses, tetapi jujukan melarikan diri (cth. n) tidak.“

Contoh 1:

Contoh di bawah dipilih daripada 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"

Hasil pelaksanaan contoh di atas ini kelihatan seperti ini:

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

Contoh 2:

Jika anda menjalankan contoh yang sama tanpa String.raw menggunakan kod di bawah:

// 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"

Keputusan kelihatan seperti ini:

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

Contoh 3:

Jika anda menjalankan contoh yang sama melibatkan n menggunakan kod di bawah:

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)

Keputusan kelihatan seperti ini:

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

Cara Tailwindcss menggunakan String.raw:

fail ujian ui.spec.ts memperuntukkan String.raw kepada html dan css.

html didapati digunakan dalam banyak ujian yang ditulis dalam ui.spec.ts

Mari kita lihat dengan lebih dekat kod ujian ini:

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)
 })
}

Memang menarik untuk melihat keseluruhan tatasusunan yang ditakrifkan dalam gelung for.

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

${classes} digantikan dengan item pertama tatasusunan di bawah:

[<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>

Tentang kami:

Di Think Throo, kami berada dalam misi untuk mengajar konsep seni bina asas kod lanjutan yang digunakan dalam projek sumber terbuka.

10x kemahiran pengekodan anda dengan mempraktikkan konsep seni bina lanjutan dalam Next.js/React, pelajari amalan terbaik dan bina projek gred pengeluaran.

Kami adalah sumber terbuka — https://github.com/thinkthroo/thinkthroo (Beri kami bintang!)

Kami juga menyediakan perkhidmatan pembangunan web dan penulisan teknikal. Hubungi kami di hello@thinkthroo.com untuk mengetahui lebih lanjut!

Rujukan:

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

Atas ialah kandungan terperinci String.raw dalam kod sumber CSS Tailwind.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!