String.raw()
åºçº¿
广æ³å¯ç¨
èª 2015å¹´9æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
String.raw() éææ¹æ³æ¯æ¨¡æ¿åç¬¦ä¸²çæ ç¾å½æ°ãå®çä½ç¨ç±»ä¼¼äº Python ä¸ç r åç¼æ C# ä¸ç¨äºå符串åé¢éç @ åç¼ãå®ç¨äºè·å模æ¿å符串çåå§å符串形å¼ââå³ï¼æ¿æ¢è¡¨è¾¾å¼ï¼ä¾å¦ ${foo}ï¼ä¼è¢«æ¿æ¢å¤çï¼ä½è½¬ä¹åºåï¼ä¾å¦ \nï¼ä¸ä¼è¢«å¤çã
å°è¯ä¸ä¸
// 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"
è¯æ³
String.raw(strings, ...substitutions)
String.raw`templateString`
åæ°
strings-
æ ¼å¼æ£ç¡®ç模æ¿å符串æ°ç»å¯¹è±¡ï¼ä¾å¦
{ raw: ['foo', 'bar', 'baz'] }ï¼åºè¯¥æ¯ä¸ä¸ªå ·æraw屿§ç对象ï¼å ¶å¼æ¯ä¸ä¸ªç±»æ°ç»çå符串对象ã ...substitutions-
å å«çæ¿æ¢è¡¨è¾¾å¼å¯¹åºçå¼ã
templateString-
ä¸ä¸ªæ¨¡æ¿å符串ï¼å¯ä»¥å 嫿¿æ¢è¡¨è¾¾å¼ï¼
${...}ï¼ã
è¿åå¼
ç»å®æ¨¡æ¿å符串çåå§å符串ã
å¼å¸¸
TypeError-
å¦æç¬¬ä¸ä¸ªåæ°æ²¡æ
raw屿§ï¼æèraw屿§çå¼ä¸ºundefinedænullï¼å伿åºå¼å¸¸ã
æè¿°
å¨å¤§å¤æ°æ
åµä¸ï¼String.raw() 䏿¨¡æ¿å符串ä¸èµ·ä½¿ç¨ãä¸é¢æå°ç第ä¸ç§è¯æ³å¾å°ä½¿ç¨ï¼å 为 JavaScript 弿ä¼èªå¨ä¸ºä½ è°ç¨å®å¹¶ä¼ å
¥éå½çåæ°ï¼å°±åå
¶ä»æ è®°å½æ°ä¸æ ·ï¼ã
String.raw() æ¯å¯ä¸ä¸ä¸ªå
ç½®çæ¨¡æ¿å符串æ ç¾å½æ°ï¼å 为å®å¤ªå¸¸ç¨äºãä¸è¿å®å¹¶æ²¡æä»ä¹ç¹æ®è½åï¼ä½ èªå·±ä¹å¯ä»¥å®ç°ä¸ä¸ªåå®åè½ä¸æ¨¡ä¸æ ·çæ ç¾å½æ°ã
è¦åï¼ä¸åºç´æ¥å° String.raw ä½ä¸ºâæ è¯âæ ç¾ã请åè§æå»ºæ è¯æ ç¾ä»¥äºè§£å¦ä½å®ç°æ¤æä½ã
å¦æä½¿ç¨æ²¡æ length 屿§æ length ä¸ºéæ£æ°ç raw 屿§ç对象è°ç¨ String.raw() æ¹æ³ï¼å®å°è¿åä¸ä¸ªç©ºå符串 ""ã妿 substitutions.length < strings.raw.length - 1ï¼å³æ²¡æè¶³å¤çæ¿æ¢é¡¹æ¥å¡«å
å ä½ç¬¦ââè¿å¨ä¸ä¸ªæ ¼å¼æ£ç¡®çæ 记模æ¿åé¢é䏿¯ä¸å¯è½åççï¼ï¼åå
¶ä½çå ä½ç¬¦å°è¢«å¡«å
为空å符串ã
示ä¾
>ä½¿ç¨ String.raw()
String.raw`Hi\n${2 + 3}!`;
// 'Hi\\n5!'ï¼'Hi' åé¢çåç¬¦ä¸æ¯æ¢è¡ç¬¦ï¼'\' å 'n' æ¯ä¸¤ä¸ªä¸åçå符ã
String.raw`Hi\u000A!`;
// 'Hi\\u000A!'ï¼åä¸ï¼è¿éå¾å°ç伿¯ \ãuã0ã0ã0ãAï¼6 个å符ã
// ä»»ä½ç±»åç转ä¹å½¢å¼é½ä¼å¤±æï¼ä¿çåæ ·è¾åºã
// ä½ å¯ä»¥éè¿æ£æ¥ string ç .length 屿§æ¥ç¡®è®¤è¿ä¸ç¹ã
const name = "Bob";
String.raw`Hi\n${name}!`;
// 'Hi\\nBob!'ï¼å
æè¡¨è¾¾å¼è¿å¯ä»¥æ£å¸¸æ¿æ¢ã
String.raw`Hi \${name}!`;
// 'Hi \\${name}!'ï¼ç¾å
符å·è¢«è½¬ä¹ï¼è¿é没ææå¼ã
æå»ºæ è¯æ ç¾
许å¤å·¥å ·ä¼å¯¹ç±ç¹å®åç§°æ è®°çåé¢éè¿è¡ç¹æ®å¤çã
// ä¸äºæ ¼å¼åå·¥å
·å°ä¼å°è¿ä¸ªåé¢éçå
å®¹æ ¼å¼å为 HTML
const doc = html`<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
`;
ä¸ä¸ªå¤©ççå®ç° html æ ç¾çæ¹å¼å¯è½æ¯ï¼
const html = String.raw;
å®é
ä¸ï¼è¿å¯¹äºä¸é¢çæ
嵿¯ææçãç¶èï¼å 为 String.raw æ¹æ³å°è¿æ¥åå§çå符串åé¢éè䏿¯âå¤çè¿âçå符串åé¢éï¼æä»¥è½¬ä¹åºåå°ä¸ä¼è¢«å¤çã
const doc = html`<canvas>\n</canvas>`;
// "<canvas>\\n</canvas>"
对äºâçå®çæ è¯âæ ç¾èè¨ï¼è¿å¯è½å¹¶ä¸æ¯ä½ æ³è¦çï¼å 为è¿ç§æ
åµä¸æ ç¾çº¯ç²¹ç¨äºæ è®°åï¼ä¸ä¼æ¹ååé¢éçå¼ãå¨è¿ç§æ
åµä¸ï¼ä½ å¯ä»¥å建ä¸ä¸ªèªå®ä¹æ ç¾ï¼å¹¶å°âå¤çè¿âçåé¢éæ°ç»ä¼ éç» String.rawï¼åè£
å®ä»¬æ¯åå§å符串ã
const html = (strings, ...values) => String.raw({ raw: strings }, ...values);
// ä¸äºæ ¼å¼åå·¥å
·å°ä¼å°è¿ä¸ªåé¢éçå
å®¹æ ¼å¼å为 HTML
const doc = html`<canvas>\n</canvas>`;
// "<canvas>\n</canvas>"; "\n" åæäºæ¢è¡ç¬¦
请注æï¼ç¬¬ä¸ä¸ªåæ°æ¯ä¸ä¸ªå¸¦æ raw 屿§ç对象ï¼å
¶å¼æ¯ä¸ä¸ªç±»æ°ç»å¯¹è±¡ï¼å
·æ length 屿§åæ´æ°ç´¢å¼ï¼ï¼è¡¨ç¤ºæ¨¡æ¿åé¢éä¸åéçå符串ãå
¶ä½çåæ°æ¯æ¿æ¢é¡¹ãç±äº raw å¼å¯ä»¥æ¯ä»»ä½ç±»æ°ç»å¯¹è±¡ï¼å®çè³å¯ä»¥æ¯ä¸ä¸ªå符串ï¼ä¾å¦ï¼'test' 被è§ä¸º ['t', 'e', 's', 't']ã以ä¸ä»£ç ä¸ `t${0}e${1}s${2}t` çæï¼
String.raw({ raw: "test" }, 0, 1, 2); // 't0e1s2t'
è§è
| è§è |
|---|
| ECMAScript® 2027 Language Specification> # sec-string.raw> |