Building Strings With Quotes and Backticks

The port of ticket_branch.py starts with the lines that print. In Python, every one of them is an f-string, and you’ll copy these lines over almost character for character.

That’s where the risk sits. JavaScript builds text with quotes and backticks, and one Python habit carried into a backtick string makes the helper print a broken branch name without any error. In this lesson, you’ll port the branch line and meet the one printed line that can’t match.

Port the Branch Line

Fixed text carries over unchanged. Single and double quotes make the same kind of string in JavaScript, as in Python, and everyday escapes such as \n and \" work the same way. Style guides pick one for plain text, and this course uses double quotes.

Text with values in it is different. Here’s the Python helper’s branch line, with the slug written out by hand, since building it comes later in the course:

Language: Python
key = "PAY-2291"
slug = "refund-emails-show-the-wrong-currency"
print(f"Branch: fix/{key.lower()}-{slug}")

JavaScript’s equivalent of an f-string is the template literal, a string in backticks. Its holes sit where an f-string has braces, and JavaScript fills them in when the line runs. Watch out for the f your fingers add out of habit, because JavaScript has no string prefixes, and console.log(f"Branch: fix/{key}") stops with SyntaxError: missing ) after argument list before anything runs.

A hole can hold any expression, method calls included. For now, take key.toLowerCase() as JavaScript’s key.lower(). The other string methods come later. With backticks in place of the f, const naming each value, and console.log() doing print()’s job, the port reads like this:

Language: JavaScript
const key = "PAY-2291";
const slug = "refund-emails-show-the-wrong-currency";
console.log(`Branch: fix/{key.toLowerCase()}-{slug}`);

Predict before you run it: Does JavaScript fill in both holes, complain about them, or do something else?

Locked learning resources

Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Already a member? Sign-In

Locked learning resources

The full lesson is for members only. Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Already a member? Sign-In

Become a Member to join the conversation.