Javascript строка по формату

Форматирование текста

В этой главе приводится порядок работы со строками и текстом в JavaScript.

Строки

Строки используются для представления текстовых данных. Каждая строка — это набор «элементов», а каждый элемент — 16 битное беззнаковое целое значение. Элементы имеют определённые позиции. Так первый элемент имеет индекс 0, следующий — 1, и так далее. Длина строки — это количество элементов в ней. Вы можете создать строки, используя строковые литералы или объекты класса String.

Строковые литералы

Вы можете создавать простые строки, используя либо одинарные, либо двойные кавычки:

Начиная со стандарта ES6 (ES-2015) для простых и сложных строк можно использовать обратные косые кавычки, а также, вставлять значения:

const name = "Alex"; const str = `Привет, $name>, как дела?`; console.log(str); // Привет, Alex, // как дела? 

Подробнее про использование обратных косых кавычек (` `), читайте ниже.

Строки с более богатым содержимым можно создать с помощью ESC-последовательностей(комбинация символов, обычно используемая для задания неотображаемых символов и символов, имеющих специальное значение):

Шестнадцатеричные экранированные последовательности

Число после \x трактуется как шестнадцатеричное.

Unicode экранированные последовательности

Экранированные последовательности Unicode требуют по меньшей мере 4 символа после \u .

Экранирование элементов кода Unicode

Нововведение ECMAScript 6, которое позволяет экранировать каждый Unicode символ, используя шестнадцатеричные значения (вплоть до 0x10FFFF ). С простым экранированием Unicode обычно требуется писать связанные друг с другом части по — отдельности для получения того же результата.

'\u' // То же самое с простым Unicode '\uD87E\uDC04' 

Объекты String

Объект String — это обёртка вокруг примитивного строкового типа данных.

var s = new String("foo"); // Создание объекта console.log(s); // Отобразится: typeof s; // Вернёт 'object' 

Вы можете вызвать любой метод объекта класса String на строковом литерале — JavaScript сам преобразует строковый литерал во временный объект String , вызовет требуемый метод и затем уничтожит этот временный объект. Со строковыми литералами вы также можете использовать и String.length свойство.

Следует использовать строковые литералы до тех пор, пока вам действительно не обойтись без String объекта, потому что, порой, объект String может вести себя неожиданно (не так, как строковый литерал). Например:

var s1 = "2 + 2"; // Создание строкового литерала var s2 = new String("2 + 2"); // Создание String объекта eval(s1); // Вернёт 4 eval(s2); // Вернёт строку "2 + 2" 

Объект String имеет свойство length , которое обозначает количество символов в строке. Например, в следующем коде x получит значение 13 потому, что «Hello, World!» содержит 13 символов, каждый из которых представлен одним кодом UTF-16. Вы можете обратиться к каждому коду с помощью квадратных скобок. Вы не можете изменять отдельные символы строки, т.к. строки это массива-подобные неизменяемые объекты:

var mystring = "Hello, World!"; var x = mystring.length; mystring[0] = 'L'; // Ничего не произойдёт, т.к. строки неизменяемые mystring[0]; // Вернёт: "H" 

Объект String имеет множество методов, в том числе и те, которые возвращают преобразованную исходную строку (методы substring , toUpperCase и другие).

В таблице ниже представлены методы String объекта.

Метод	Описание
charAt , charCodeAt , codePointAt	Возвращает символ или символьный код в указанной позиции в строке.
indexOf , lastIndexOf	Возвращает первую (indexOf) или последнюю (lastIndexOf) позицию указанной подстроки в строке. Если данная подстрока не найдена, то возвращает -1.
startsWith , endsWith , includes	Проверяет, начинается/кончается/содержит ли строка указанную подстроку.
concat	Объединяет две строки и возвращает результат в качестве новой строки.
fromCharCode , fromCodePoint	Создаёт строку из указанной последовательности Unicode значений. Это метод класса String, а не отдельного экземпляра этого класса.
split	Разбивает строку на подстроки, результат возвращает в виде массива строк.
slice	Извлекает часть строки и возвращает её в качестве новой строки.
substring , substr	Возвращает указанную часть строки по начальному и конечному индексам, либо по начальному индексу и длине.
match , replace , search	Работа с регулярными выражениями.
toLowerCase , toUpperCase	Возвращает строку полностью в нижнем (toLowerCase) или верхнем (toUpperCase) регистре.
normalize	Возвращает нормализованную Unicode форму строки — значения объекта String, на котором вызывается.
repeat	Возвращает строку, которая представляет собой повторение исходной строки указанное количество раз.
trim	Убирает пробелы в начале и в конце строки, результат возвращается в качестве новой строки.

Многострочные шаблонные строки

Шаблонные строки представляют собой строковые литералы, которые могут содержать внутри себя встроенные выражения. С ними вы можете использовать многострочные строковые литералы и интерполяцию строк.

Такого типа строки заключаются в пару обратных штрихов (` `) (grave accent) вместо двойных или одинарных кавычек. Шаблонные строки могут содержать заполнители, которые выделяются знаком доллара и фигурными скобками ( $ ).

Многострочная запись

Каждая новая горизонтальная линия символов, вставленная в исходный код, является частью шаблонной строки. Используя обычные строки, вам бы потребовалось использовать следующий синтаксис для многострочной записи:

.log("string text line 1\n\ string text line 2"); // "string text line 1 // string text line 2" 

Того же результата можно добиться и другим способом (используя синтаксис шаблонных строк):

.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2" 

Встроенные выражения

Для того, чтобы добавить выражения внутрь обычных строк, вы бы использовали следующий синтаксис:

var a = 5; var b = 10; console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); // "Fifteen is 15 and // not 20." 

Теперь же, используя шаблонные строки, вы можете сделать это так:

var a = 5; var b = 10; console.log(`Fifteen is $a + b> and\nnot $2 * a + b>.`); // "Fifteen is 15 and // not 20." 

Для более подробной информации смотри Шаблонные строки в справочнике по JavaScript.

Интернационализация

Объект Intl представляет собой пространство имён для ECMAScript API по интернационализации, которое обеспечивает чувствительное к языку сравнение строк, форматирование чисел, времени и даты. Конструкторы для объектов Collator , NumberFormat и DateTimeFormat являются свойствами объекта Intl .

Форматирование времени и даты

Объект DateTimeFormat полезен для форматирования времени и даты. В примере ниже дата форматируется так, как это принято в США (результат отличен для разных временных зон).

var msPerDay = 24 * 60 * 60 * 1000; // July 17, 2014 00:00:00 UTC. var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197)); var options =  year: "2-digit", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", timeZoneName: "short" >; var americanDateTime = new Intl.DateTimeFormat("en-US", options).format; console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT 

Форматирование чисел

Объект NumberFormat полезен при форматировании чисел, например, валют.

var gasPrice = new Intl.NumberFormat("en-US",  style: "currency", currency: "USD", minimumFractionDigits: 3 >); console.log(gasPrice.format(5.259)); // $5.259 var hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec",  style: "currency", currency: "CNY" >); console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五 

Сравнение

Объект Collator полезен для сравнения и сортировки строк.

Например, в Германии есть два различных порядка сортировки строк в зависимости от документа: телефонная книга или словарь. Сортировка по типу телефонной книги подчёркивает звуки.

var names = ["Hochberg", "Hönigswald", "Holzman"]; var germanPhonebook = new Intl.Collator("de-DE-u-co-phonebk"); // as if sorting ["Hochberg", "Hoenigswald", "Holzman"]: console.log(names.sort(germanPhonebook.compare).join(", ")); // logs "Hochberg, Hönigswald, Holzman" 

Примером по сортировке для словаря слов на немецком языке служит следующий код:

var germanDictionary = new Intl.Collator("de-DE-u-co-dict"); // as if sorting ["Hochberg", "Honigswald", "Holzman"]: console.log(names.sort(germanDictionary.compare).join(", ")); // logs "Hochberg, Holzman, Hönigswald" 

Регулярные выражения

Регулярные выражения — это шаблоны, которые используются для описания некоторого множества строк . Это очень мощный и в некоторый степени непростой механизм, и поэтому ему посвящена отдельная глава. Узнать больше о регулярных выражениях можно здесь:

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

JavaScript String Format – Formatting Strings in JS

Dillion Megida

JavaScript has many string methods you can use to format strings. In this article, I’ll show you some of the most commonly used methods.

How to Use the toLowerCase() String Method

As the name implies, you use the toLowerCase() string method to convert strings to their lowercase version.

This method does not affect the original string. It takes the original string and returns a new string, which is the lowercased version.

const string = "HeLLo woRld" const lowercased = string.toLowerCase() console.log(string) // HeLLo woRld console.log(lowercased) // hello world 

As you can see, the new string has all its letters lowercased.

How to Use the toUpperCase() String Method

Similar to the first method, toUpperCase is a string method you use to convert strings to their uppercase version.

It also doesn’t affect the original string.

const string = "HeLLo woRld" const uppercased = string.toUpperCase() console.log(string) // HeLLo woRld console.log(uppercased) // HELLO WORLD 

Using the original string, it returns a new string, which is the uppercase version.

How to Use the replace() String Method

You use the replace string method to replace a section of a string with a substring. This way, you will format the string so you can modify it.

Here’s an example of how the replace method works:

const string = "Hello world" const modified = string.replace("world", "developers") console.log(string) // Hello world console.log(modified) // Hello developers 

The replace method, as seen above, replaces the «world» substring with «developers». It also doesn’t affect the original string.

You can also use a regex in place of a string as a replacer:

const string = "Hello world" const modified = string.replace(/o/g, "--") console.log(string) // Hello world console.log(modified) // Hell-- w--rld 

Using a regex pattern to match the «o» character globally, you can see the modified string containing double hyphens in place of the «o» in the string.

How to Use the trim() String Method

The trim method modifies strings by removing whitespaces from the beginning and end of a string.

It doesn’t modify the original string. Instead it returns a new string with the whitespaces stripped out.

const string = " H ell o world " const modified = string.trim() console.log(string) // H ell o world console.log(modified) // H ell o world 

You can see that only the spaces at the start and end are stripped off, and not the spaces between letters.

Whitespaces include spaces, tabs, break lines, and so on.

Wrapping Up

There are a couple of more ways you can format or modify strings in JavaScript. In this article, I’ve shared four of the most common methods you can use: toUpperCase , toLowerCase , replace and trim .

These methods do not affect the original string but return a new string formatted in a specific way.

Dillion Megida

Developer Advocate and Content Creator passionate about sharing my knowledge on Tech. I simplify JavaScript / ReactJS / NodeJS / Frameworks / TypeScript / et al My YT channel: youtube.com/c/deeecode

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник