JavaScript 말장난: 태그드 템플릿 리터럴

AI 요약

셰익스피어의 말장난은 문법이나 문맥에 따라 한 표현을 두 가지로 읽게 합니다. 글쓴이는 프로그래밍 언어에서도 문법이 이런 역할을 한다며, JavaScript 태그드 템플릿 리터럴에서 찾은 말장난을 소개합니다.

태그드 템플릿 리터럴

태그 함수는 템플릿 리터럴의 문자열 조각과 ${...}로 평가한 값을 각각 받아 처리합니다. 예를 들어 dedent를 태그로 쓰면 템플릿의 불필요한 들여쓰기를 제거합니다.

글쓴이는 prompt라는 태그 함수에 다음과 같은 템플릿을 전달합니다.

``js const userPrompt = prompt Please review my code.

• Link to PR: ${{ url }}
• Extra notes: ${{ notes }}
• Timestamp: ${{ time }}

; ``

${{ url }}에서 ${...} 안의 { url }은 JavaScript 객체 리터럴의 축약 속성 표기입니다. 즉 { url: url }과 같습니다. 태그 함수는 객체의 키와 값을 받아 프롬프트 안에 변수 이름과 값을 표시하는 문자열을 만듭니다. 예시 출력에서는 값이 <prompt id="url">...</prompt>처럼 감싸집니다. Helicone은 이 형식으로 프롬프트를 관측하고 분석합니다.

한 문자열을 두 가지 문법으로 읽기

JavaScript는 ${...}를 보간 구문으로 읽지만, 사람 눈에는 중괄호가 겹친 부분이 Mustache 같은 템플릿 언어의 {{ url }}처럼 보입니다. 글쓴이는 JavaScript 문법과 사람이 떠올리는 문법이 우연히 겹치는 점을 말장난으로 봅니다. 이 아이디어는 2024년 Helicone의 Justin과 함께 작업했고, 이후 SDK에 정식으로 들어갔다고 설명합니다.

Lobsters 반응

• @coby — 재치 있고 재미있네요! ${{ url, name }}를 넣으면 어떻게 되나요?
• @roryokane — “JavaScript는 한 가지를 보고, 여러분은 다른 것을 봅니다.” JavaScript 템플릿 리터럴을 본 적이 있어서인지, 글의 구문 강조가 안쪽 { }와 바깥쪽 중괄호를 분리해서인지 모르겠지만, 예제가 {{ }} 문법처럼 전혀 보이지 않습니다. 기껏해야 ${{ }}처럼 보입니다. 실제로도 $ 없이는 작동하지 않습니다. ${{ }}는 변수 이름과 값을 템플릿 리터럴에 전달하는 재치 있는 축약 표기지만, Mustache식 {{ }} 문법과 말장난을 이루는 느낌은 없습니다. $ 문자가 주변 문자열에 자연스럽게 들어가 접두사 $를 쉽게 무시할 수 있다면 말장난에 더 가까울 것 같습니다. 예를 들면 signWithPrices 템플릿에서 가격을 표시하는 방식입니다. 하지만 signWithPrices 함수가 가격을 포맷할 때 base_haircut 같은 변수 이름까지 알아야 할 이유가 떠오르지 않아 그 예도 억지스럽습니다. 프로그램에서 가장 좋은 말장난은 아마 quine일 겁니다. 지원하는 각 언어에서 주석 문자는 최소한으로 쓰고, 서로 다르게 파싱되는 문자는 최대한 많이 쓰는 quine 말입니다. 당장 떠오르는 예는 없습니다.

원문: shukla.io / 번역·요약: Trawling