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 중국어 웹사이트의 기타 관련 기사를 참조하세요!