JavaScript: Escape sequences
Suppose we want to print the text below across two lines.
- Are you hungry?
- Aaaarrrgh!If we simply pass this text to console.log(), JavaScript will print everything on a single line. Technically, we could write two consecutive console.log() calls, but let's imagine we want to do it with a single one.
console.log('- Are you hungry?- Aaaarrrgh!');
// => - Are you hungry?- Aaaarrrgh!For each of them to start on a new line, we need to add a line break, that is, to "press Enter". In programming, this is done by adding special characters, in this case \n. Yes, this is not a typo. Even though we see two characters here, from JavaScript's point of view this is a single character.
console.log('- Are you hungry?\n- Aaaarrrgh!');The result will be as follows.
- Are you hungry?
- Aaaarrrgh!What is \n?
\n is an escape sequence (sometimes also called an "escaped sequence"). It denotes a line break but is not displayed directly. You won't see \n in the program's output, as it only affects the placement of the text.
In text editors, pressing Enter adds an invisible LF (Line Feed) character. That is exactly what \n stands for. Sometimes such characters can be seen if you enable the display of special characters.
- Hello!¶
- Oh, hi!¶
- How are you?Printers, editors, and JavaScript interpreters understand \n as a command to start the text on a new line.
Examples of using \n
Here is how JavaScript handles the escape sequence \n.
In code 'Hello\nWorld'
↓
On screen Hello
WorldThe position of \n changes the resulting output.
console.log('Hello\nWorld');
// Hello
// World
console.log('Hello \nWorld');
// Hello
// World (there is a space at the end of the first line)
console.log('Hello\n World');
// Hello
// World (there is a space at the beginning of the second line)
console.log('Hello\n\nWorld');
// Hello
//
// World (an empty line between them)Spaces before or after \n are also taken into account. JavaScript treats them as ordinary characters and displays them in the output.
You can also insert \n into any part of the string, before, after, or even use it on its own.
console.log('First line');
console.log('\n'); // just an empty line
console.log('Second line');The result will be as follows.
First line
Second lineHow to print the \n character itself
\n in JavaScript is an escape sequence. It controls the placement of the text and is not displayed on screen like ordinary characters. If you need to print exactly the characters \ and n, rather than a line break, you need to escape them. To do this, you add another slash before the backslash.
console.log('Hello\\nWorld');
// Hello\nWorld
// If you forget to add the second slash
console.log('Hello\nWorld');
// Hello
// WorldIn this case, JavaScript understands \\ as an ordinary backslash and shows the string without a line break.
Other escape sequences
In addition to \n, JavaScript has other escape sequences as well.
\tdenotes a tab (the equivalent of the Tab key).\rdenotes a carriage return (used on Windows, but rarely applied in modern code).- In programming,
\nis used most often; it is enough for the majority of tasks.
Important details
\nis a single character, even though in the code it is written as two (\andn).- On Windows, the combination
\r\nis used by default, but in JavaScript (and in cross-platform development in general) it is customary to use only\nto avoid problems when moving code between systems.
Instructions
You are writing a program that shows the user a hint about how to split text into lines. Print the hint with a single call to console.log():
Use "\n" to separate lines
Example: console.log("line1\nline2")Note: \n in the first line is literal text, not a line break.
Tips
If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:
- Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
Tests are designed so that they test the solution in different ways and against different data. Often the solution works with one kind of input data but doesn't work with others. Check the «Tests» tab to figure this out, you can find hints at the error output.
It's fine. 🙆 One task in programming can be solved in many different ways. If your code passed all tests, it complies with the task conditions.
In some rare cases, the solution may be adjusted to the tests, but this can be seen immediately.
It's hard to make educational materials that will suit everyone. We do our best but there is always something to improve. If you see a material that is not clear to you, describe the problem in “Discussions”. It will be great if you'll write unclear points in the question form. Usually, we need a few days for corrections.
By the way, you can participate in courses improvement. There is a link below to the lessons course code which you can edit right in your browser.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества
Your exercise will be checked with these tests:
// @ts-check
import { expect, test, vi } from 'vitest';
test('hello world', async () => {
const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
await import('./index.js');
const firstArg = consoleLogSpy.mock.calls.join('\n');
expect(firstArg).toBe(
'Use "\\n" to separate lines\nExample: console.log("line1\\nline2")',
);
});Teacher's solution will be available in:
20:00
