← Назад към блога

Javascript backticks to single quotes

If you dont like backticks use this python code

```python
from pathlib import Path

INPUT = "index.html"
OUTPUT = "output.html"

text = Path(INPUT).read_text(encoding="utf-8")

out = []
i = 0
n = len(text)

while i < n:
    if text[i] != "`":
        out.append(text[i])
        i += 1
        continue

# beginning of template literal
    i += 1
    parts = []
    current = []

while i < n:
        ch = text[i]

# end of template literal
        if ch == "`":
            if current:
                parts.append(("text", "".join(current)))
            i += 1
            break

# ${...}
        if ch == "$" and i + 1 < n and text[i + 1] == "{":
            if current:
                parts.append(("text", "".join(current)))
                current = []

i += 2
            depth = 1
            expr = []

while i < n and depth:
                c = text[i]

if c == "{":
                    depth += 1
                elif c == "}":
                    depth -= 1
                    if depth == 0:
                        i += 1
                        break

if depth:
                    expr.append(c)

i += 1

parts.append(("expr", "".join(expr).strip()))
            continue

current.append(ch)
        i += 1

converted = []

for kind, value in parts:
        if kind == "text":
            value = (
                value
                .replace("\\", "\\\\")
                .replace("'", "\\'")
                .replace("\r", "")
                .replace("\n", "\\n")
            )

if value:
                converted.append("'" + value + "'")

else:
            converted.append("(" + value + ")")

if not converted:
        out.append("''")
    else:
        result = converted[0]

for part in converted[1:]:
            result += " + " + part

out.append(result)

Path(OUTPUT).write_text("".join(out), encoding="utf-8")

print("Done.")
print("Saved to", OUTPUT)
```

# JavaScript Backticks to Single Quotes

Template literals (backticks) are one of the most useful features introduced in modern JavaScript. They allow multi-line strings and string interpolation using `${}` expressions. However, there are situations where you may need to convert backticks to single quotes.

Common reasons include:

- Supporting older JavaScript environments.
- Following a project's coding style.
- Preparing code for systems that don't support template literals.
- Simplifying generated code.

## What Are Backticks?

Backticks (`) create **template literals**.

Example:

```javascript
const name = 'John';
const message = `Hello, ${name}!`;
```

Output:

```text
Hello, John!
```

Unlike single quotes, template literals can evaluate JavaScript expressions directly inside the string.

## What Are Single Quotes?

Single quotes create regular JavaScript strings.

Example:

```javascript
const message = 'Hello World';
```

They cannot evaluate expressions automatically.

## Converting Backticks to Single Quotes

### Simple Strings

Before:

```javascript
const text = `Hello World`;
```

After:

```javascript
const text = 'Hello World';
```

Since there is no interpolation or multiple lines, the conversion is straightforward.

## Handling String Interpolation

Backticks often contain variables.

Before:

```javascript
const name = 'John';
const message = `Hello, ${name}!`;
```

Equivalent using single quotes:

```javascript
const name = 'John';
const message = 'Hello, ' + name + '!';
```

## Multiple Variables

Before:

```javascript
const first = 'John';
const last = 'Doe';

const fullName = `${first} ${last}`;
```

After:

```javascript
const first = 'John';
const last = 'Doe';

const fullName = first + ' ' + last;
```

## Expressions

Before:

```javascript
const total = `Total: ${price * quantity}`;
```

After:

```javascript
const total = 'Total: ' + (price * quantity);
```

Parentheses help preserve operator precedence.

## Multi-Line Strings

Backticks support multiple lines naturally.

Before:

```javascript
const html = `
<div>
    <h1>Hello</h1>
</div>
`;
```

With single quotes:

```javascript
const html =
    '<div>\n' +
    '    <h1>Hello</h1>\n' +
    '</div>';
```

Or:

```javascript
const html = '<div>\n    <h1>Hello</h1>\n</div>';
```

## Escaping Single Quotes

If your string contains `'`, it must be escaped.

```javascript
const text = 'It\'s JavaScript';
```

Backticks do not require escaping single quotes.

## When Not to Convert

Avoid replacing backticks if your code relies on:

- `${}` interpolation
- Multi-line strings
- Tagged template literals
- Libraries that expect template literals

In these cases, converting to single quotes may reduce readability or require additional concatenation.

## Automatic Conversion

Many IDEs and formatters can help convert template literals. You can also write a simple parser or use a regular expression for basic cases, although regex is not recommended for complex JavaScript syntax because it cannot reliably understand nested expressions.

## Best Practices

- Keep backticks when using template literals.
- Use single quotes for plain strings.
- Add parentheses around complex expressions during concatenation.
- Escape `'` characters when necessary.
- Test the converted code to ensure the output remains identical.

## Conclusion

Backticks and single quotes both create strings, but they serve different purposes. Backticks provide template literals with interpolation and multi-line support, while single quotes create traditional strings. If your template literal doesn't use advanced features, converting it to single quotes is usually as simple as replacing the delimiters. When interpolation is involved, replace `${}` expressions with string concatenation to preserve the original behavior.