template literal vs string literal

Benchmark created on

Preparation HTML

Test runner

Ready to run.

Testing in
TestOps/sec
string literal
console.log("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50")
ready
string.raw
console.log(     String.raw({
          raw: [
            "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
            "file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground",
            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
            "disabled:cursor-not-allowed disabled:opacity-50",
          ],
        }),)
ready
template literal
console.log(`${"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors"}${"file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground"}${"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"}${"disabled:cursor-not-allowed disabled:opacity-50"}`,)
ready
add
console.log("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground" +
          "file:border-0 file:bg-transparent file:text-sm file:font-medium" +
          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" +
          "disabled:cursor-not-allowed disabled:opacity-50")
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.