JavaScript中functionName`string`标签模板语法工作原理咨询

Great question! That syntax you're seeing is called Tagged Template Literals, a core ES6 (ES2015) feature that lets you hook into the parsing of template literals with a custom function. It looks weird at first, but once you break down how it works, it makes perfect sense—especially for libraries like styled-components and csjs that need to process styles with dynamic values.

Let's Start with the Basics: Template Literals vs. Tagged Templates #

First, you already know regular template literals (the backtick strings) let you embed variables with ${}:

const green = "#00ff00";
const cssString = ` .panel { background-color: ${green}; } `;
// cssString is just a regular string: " .panel { background-color: #00ff00; } "

A tagged template takes this a step further: instead of just creating a string, you pass the template to a function (the "tag") by putting the function name right before the backticks. So csjs .panel { ... }is equivalent to calling thecsjs` function, but with a special set of arguments—not just a single string.

What the Tag Function Receives #

When you use a tagged template, JavaScript automatically splits the template into two parts and passes them to your tag function:

1. First argument: An array of all the static string fragments (the parts between the ${} interpolations).
2. Rest arguments: The evaluated result of each ${} expression, in order.

Let's use your csjs example to break this down:

const green = "#00ff00";
const styles = csjs` .panel { border: 1px solid black; background-color: ${green}; }`;

Here's what the csjs function gets as inputs:

• First parameter: [" .panel { border: 1px solid black; background-color: ", "; }"]
• Second parameter: "#00ff00" (the value of green)

The tag function can then process these pieces however it needs. For csjs, it combines the static CSS fragments with the dynamic values to generate a styles object with scoped class names.

Compare to Regular Function Calls #

Your regular function call example:

const styles = csjs(` .panel { border: 1px solid black; } `);

Here, you're passing a single string argument to csjs. But with tagged templates, the function gets access to the raw fragments and interpolations separately—this is crucial for libraries like styled-components, which need to handle dynamic styles that depend on component props (e.g., ${props => props.color}).

How styled-components Uses This #

Take your styled-components example:

const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `;

styled.h1 is actually a tag function (it's a function returned by the styled utility for the h1 element). When you use the tagged template, it:

1. Parses the CSS string fragments.
2. Handles any interpolations (like if you had ${props => props.primary ? 'blue' : 'palevioletred'}).
3. Returns a React component that renders an h1 with the generated CSS styles applied (usually via a unique class name).

A Simple Custom Tag Example #

To make this even clearer, let's write a tiny tag function ourselves:

function shoutTag(strings, ...values) {
  let result = '';
  // Loop through each string fragment and corresponding value
  strings.forEach((str, index) => {
    result += str + (values[index] || '');
  });
  // Return the combined text in ALL CAPS
  return result.toUpperCase();
}

const name = "Ritwick";
const message = shoutTag`Hello, ${name}! This is how tagged templates work.`;
console.log(message); // HELLO, RITWICK! THIS IS HOW TAGGED TEMPLATES WORK.

This shows exactly how the tag function can take the split fragments and interpolations, process them, and return a custom result.

内容的提问来源于stack exchange，提问作者Ritwick Dey