string-to-template-literal
v3.0.0
Published
๐ Like JSON.stringify(), but returns a template string
Downloads
32,903
Readme
Encode as template literal
๐ Like JSON.stringify()
, but returns a template string
// In some HTTP service that generates a '<script>' to print Hamlet...
const hamlet = await readFile("hamlet.txt", "utf8");
const js = `console.log(${stringToTemplateLiteral(hamlet)})`;
console.debug(js);
// No '\n'; it's a multiline string! ๐
// This is 'console.debug(js)' output from above ๐
console.log(`ACT I
SCENE I. Elsinore. A platform before the castle.
FRANCISCO at his post. Enter to him BERNARDO
BERNARDO
Who's there?
...`);
๐ Escapes </script>
sequences; safe to inject into <script>
tags
๐คฉ Great for encoding text for embedding in JavaScript source text
๐ค It's tiny; only 5 lines of code!
๐ฆ Slightly more space-efficient than JSON.stringify()
Installation
You can install this package using npm, pnpm, Yarn, or your favorite npm package manager.
npm install string-to-template-literal
You can also import this package straight from an npm CDN if you're in your browser using native ES modules:
import {} from "https://esm.run/string-to-template-literal@^3.0.0";
import {} from "https://esm.sh/string-to-template-literal@^3.0.0";
/** @param {string} x */
function stringToTemplateLiteral(x = "") {
x = `${x}`;
const escaped = x.replace(/\\|`|\$(?={)|(?<=<)\//g, (y) => "\\" + y);
return `\`${escaped}\``;
}
๐ฉโโ๏ธ This code is licensed under the 0BSD license so you don't need to include any license text. ๐
Usage
The stringToTemplateLiteral()
function returns a wrapped string that is compatible with eval()
, embedding in <script>
tags, and embedding in .js
files.
import stringToTemplateLiteral from "string-to-template-literal";
// Running in some serverless runtime like
// Vercel, Deno Deploy, AWS Lambda, etc.
async function handleIndexHTML(request) {
const hamlet = await readFile("hamlet.txt", "utf8");
const js = `console.log(${stringToTemplateLiteral(hamlet)})`;
const html = `
<p>Check your DevTools console for Hamlet!</p>
<script>${js}</script>
`;
return new Response(html);
}
The best example of when you might want to use this package is when creating a source code string that you want to embed in your JavaScript application as raw text. Think something like a bundler that needs to embed a .txt
file into a JavaScript source file or a dynamic HTML page that needs to inject some text into a <script>
tag. You could use JSON.stringify()
in all these cases, but your text may become unreadable to humans since JSON.stringify()
forces everything on one line with lots of escapes that are not needed when using `template strings`
.