Работа со строками в javascript

Метод slice ()

slice () извлекает часть строки и возвращает извлеченную часть в новой строке.

Метод принимает 2 параметра: начальный индекс (положение) и Конечный индекс (позиция).

Этот пример нарезает часть строки из позиции 7 в положение 13:

var str = «Apple, Banana, Kiwi»;
var res = str.slice(7, 13);

The result of res will be:

Banana

Если параметр имеет отрицательное значение, позиция учитывается от конца строки.

Этот пример нарезает часть строки из позиции-12 в положение-6:

var str = «Apple, Banana, Kiwi»;
var res = str.slice(-12, -6);

The result of res will be:

Banana

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

var res = str.slice(7);

или, считая с конца:

Займемся конвертацией

В JavaScript предусмотрено только три вида преобразования типов объектов:

  1. Числовое;
  2. Строковое;
  3. Логическое.

В текущей публикации я расскажу про 2 из них, так как знание о них нужнее для работы со строками.

Числовое преобразование

Чтобы значение элемента явно преобразовать к числовому виду, можно использовать Number (value).

Есть и более короткое выражение: +«999».

Строковая конвертация

Выполняется функцией alert, а также явным вызовом String (text).

1
2
3
alert (999+ " super price") 
var text = String(999)
alert( text === "999" );

На этой ноте я решил закончит свою работу. Подписывайтесь на мой блог и не забывайте делиться ссылкой на него со своими друзьями. Желаю удачи в обучении. Пока-пока!

Прочитано: 233 раз

Численное преобразование

Численное преобразование происходит в математических функциях и выражениях, а также при сравнении данных различных типов (кроме сравнений , ).

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

Значение Преобразуется в…
Строка Пробельные символы по краям обрезаются.Далее, если остаётся пустая строка, то , иначе из непустой строки «считывается» число, при ошибке результат .

Например:

Ещё примеры:

  • Логические значения:

  • Сравнение разных типов – значит численное преобразование:

    При этом строка преобразуется к числу, как указано выше: начальные и конечные пробелы обрезаются, получается строка , которая равна .

  • С логическими значениями:

    Здесь сравнение снова приводит обе части к числу. В первой строке слева и справа получается , во второй .

Посмотрим на поведение специальных значений более внимательно.

Интуитивно, значения ассоциируются с нулём, но при преобразованиях ведут себя иначе.

Специальные значения преобразуются к числу так:

Значение Преобразуется в…

Это преобразование осуществляется при арифметических операциях и сравнениях , но не при проверке равенства . Алгоритм проверки равенства для этих значений в спецификации прописан отдельно (пункт ). В нём считается, что и равны между собой, но эти значения не равны никакому другому значению.

Это ведёт к забавным последствиям.

Например, не подчиняется законам математики – он «больше либо равен нулю»: , но не больше и не равен:

Значение вообще «несравнимо»:

Для более очевидной работы кода и во избежание ошибок лучше не давать специальным значениям участвовать в сравнениях .

Используйте в таких случаях переменные-числа или приводите к числу явно.

Метод slice()

извлекает часть строки и возвращает извлеченную часть в новой
строке.

Метод принимает 2 параметра: начальную позицию и конечную позицию (конечная позиция не включена).

В этом примере вырезается часть строки из позиции 7 в позицию 12 (13-1):

var str = «Apple, Banana, Kiwi»;
var res = str.slice(7, 13);

Результат res будет:

Помните: JavaScript считает позиции с нуля. Первая позиция 0.

Если параметр отрицательный, позиция отсчитывается от конца строки.

Этот пример вырезает часть строки из позиции -12 в позицию -6:

var str = «Apple, Banana, Kiwi»;
var res = str.slice(-12, -6);

Результат res будет:

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

var res = str.slice(7);

или считая с конца:

Примитивные строковые типы и String Objects

Для начала мы проясним различие между двумя типами строк. JavaScript различает примитивную строку (неизменяемый тип) и объект String.

Чтобы понять различия между ними, инициализируем примитивную строку и объект-строку.

// Инициализируемпримитивнуюстроку
const stringPrimitive = "A new string.";

// ИнициализируемString Objects
const stringObject = newString("A new string.");  

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

typeof stringPrimitive;

Вывод

string

Во втором примере мы использовали конструктор new String(), чтобы создать объект-строку и присвоить его переменной.

typeof stringObject;

Вывод

object

В большинстве случаев вы будете создавать примитивные строки. JavaScript может использовать свойства и методы объекта String без явного приведения примитивной строки к object.

Методы и свойства String Objects доступны для всех строк. Но JavaScript осуществляет конвертацию строки в объект и обратно каждый раз, когда вызывается метод или свойство.

slice

При применении к строке метода slice возвращается новая строка, в которой содержится отрывок изначальной, определяемый переданными аргументами. Первый аргумент указывает индекс, с которого начинается выборка символов. Второй аргумент — необязательный, он задаёт конечный индекс.

Если второй аргумент не указан, метод slice извлечёт все символы до конца строки:

var str = 'невероятно';
// передаём индекс 2 в метод slice. нумерация начинается с нуля.
var str2 = str.slice(2);
console.log(str2); // вероятно

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

var str = 'невероятно';
var str3 = str.slice(2, 4);
console.log(str3); // ве

Как видно из примера, приведенного выше, метод slice возвращает символ, указанный как индекс в первом аргументе, но не возвращает индекс, указанный во втором.

Оба аргумента могут использовать отрицательные числа. В таких случаях они указывают начальный и конечный индекс, отсчитывая обратно с конца строки. В примере, приведенном ниже, мы выберем четыре последних символа, передав slice значение -4:

var str = 'невероятно';
var str4 = str.slice(-4);
console.log(str4); // ятно

В следующем примере мы передадим JS slice string аргументы -4 и -2. Таким образом, мы начнём выборку подстроки за четыре символа до конца строки и закончим за два символа до конца:

var str = 'невероятно';
var str5 = str.slice(-4, -2);
console.log(str5); // ят

slice

Есть три
основных метода для выделения подстрок из строки – это substring, substr и
slice. Метод slice имеет следующий
синтаксис:

str.slice(start )

и возвращает
часть строки от start до end (не включая его).
Например:

console.log( str.slice(, 5) );         //<span
console.log( str.slice(6, 11) );        //class
console.log( str.slice(12) );           //"clock"...
console.log( str.slice(-7, -1) );       //</span

Следующий метод

str.substring(start )

работает
практически также как и slice, но здесь аргумент start может быть
больше, чем end, например:

console.log( str.substring(6, 11) );     //class
console.log( str.substring(11, 6) );     //class

Но отрицательные
значения записывать нельзя, они будут трактоваться как 0.

Последний метод

str.substr(start )

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

console.log( str.substr(6, 13) );     //class = "clock"
console.log( str.substr(12) );        //"clock">12:34</span>

При
отрицательном значении первого аргумента позиция отсчитывается с конца строки.

Какой из этих
трех методов выбирать для выделения строк? По большому счету без разницы. Они
все работают эффективно, так что это дело предпочтения программиста.

Строки неизменяемые

В JavaScript строки неизменяемые. Это значит, что в уже существующей строке нельзя менять никакие символы или добавлять в неё что-то новое.

Так как строки неизменяемые, то методы, используемые для работы со строками, возвращают новые строки, а не изменяют ту строку, относительно которой они были вызваны:

let стр = "Привет!";
 
alert(стр.toUpperCase());   // "HELLO" - новое возвращаемое методом значение
alert(стр);                 // "hello" - первоначальная строка не изменена

Чтобы изменить строку, можно создать новую строку и записать её в ту же самую переменную вместо старой строки:

let стр = "Строка";
стр = стр.toUpperCase();
alert(стр);   // "СТРОКА"

JS Уроки

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS ScopeJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS DebuggingJS HoistingJS Strict ModeJS this KeywordJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

Функции == Комментарии

Функции должны быть короткими и делать только что-то одно. Если это что-то большое, имеет смысл разбить функцию на несколько меньших. Иногда следовать этому правилу непросто, но это определённо хорошее правило.

Небольшие функции не только облегчают тестирование и отладку – само существование таких функций выполняет роль хороших комментариев!

Например, сравним ниже две функции . Каждая из них выводит простое число до .

Первый вариант использует метку :

Второй вариант использует дополнительную функцию для проверки на простое:

Второй вариант легче для понимания, не правда ли? Вместо куска кода мы видим название действия (). Иногда разработчики называют такой код самодокументируемым.

Таким образом, допустимо создавать функции, даже если мы не планируем повторно использовать их. Такие функции структурируют код и делают его более понятным.

Поиски замена строковых значений

С помощью метода replace() можно осуществлять поиск строки и её замену новым значением. В качестве первого параметра методу следует передать значение для поиска, а вторым – значения для замены.

constoriginalString = "How are you?"

// Заменяем первое вхождение строки "How" на "Where"
constnewString = originalString.replace("How", "Where");

console.log(newString);

Вывод

Where are you?

Также можно использовать регулярные выражения. Например, метод replace() затрагивает только первое вхождение искомой строки. Но мы можем использовать флаг g (глобальный), чтобы найти все вхождения, и флаг i (независимый от регистра), чтобы игнорировать регистр.

constoriginalString = "Javascript is a programming language. I'm learning javascript."

// Ищемвсевхождениястроки"javascript" изаменяемеёна"JavaScript"
constnewString = originalString.replace(/javascript/gi, "JavaScript");

console.log(newString);

Вывод

JavaScript is a programming language. I'm learning JavaScript.

Кавычки

Строки в JavaScript должны быть заключены в кавычки. В JavaScript существует три вида кавычек: двойные (), одинарные () и обратные ():

"Строка в двойных кавычках"
'Строка в одинарных кавычках'
`Строка в обратных кавычках`

Вид кавычек в начале и конце строки должен совпадать.

Строки могут состоять из нуля и более символов:

''         // Пустая строка
"Строка"   // Не пустая строка

Строки с двойными и одинарными кавычками ничем не отличаются между собой по функционалу – они могут содержать лишь текст и управляющие последовательности. А вот строки с обратными кавычками имеют более широкий функционал. Такие строки могут содержать так называемые подстановки, обозначаемые знаком доллара и фигурными скобками . Подстановки могут содержать любые произвольные выражения:

let стр = "Мир!";
let стр2 = `Привет, ${стр}`;  // Использование переменной в строке

alert(стр2);                  // Привет, Мир!
alert(`2 + 3 = ${2 + 3}.`);    // 2 + 3 = 5.

Выражение, расположенное в подстановке () вычисляется, и его результат становится частью строки.

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

let числа = `Числа:
1
   2`;

alert(числа); // Числа:
              // 1
              //   2

Строки с обратными кавычками называются строками-шаблонами или шаблонными литералами.

Строки, заключённые в одни кавычки, могут содержать другие кавычки:

"одинарные 'кавычки' и `обратные` внутри двойных"
'а здесь "так" и `так`!'
`а здесь "так" и 'так'!`

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

alert("это всё одна \
длинная \
строка");   // это всё одна длинная строка

alert('это всё одна \
длинная \
строка');   // это всё одна длинная строка

alert(`это всё одна \
длинная \
строка`);   // это всё одна длинная строка

Некоторые другие методы

У строковых переменных
есть еще пара полезных и часто используемых методов, это:

str.trim()

убирает пробелы
в начале и конце строки:

let str = "   string   ";
console.log( str.trim() );

И

str.repeat(n)

для повторения
строки n раз:

let str = "Abc";
console.log( str.repeat(5) );

Это, конечно, не
все методы строк. По мере использования JavaScript вы познакомитесь
со многими другими, но для начала этого будет достаточно. Также отдельно стоит
тема регулярных выражений – мощнейший инструмент для поиска, замены и проверки различных
строковых шаблонов, но об этом мы будем говорить на отдельном занятии.

Видео по теме

JavaScipt #1: что это такое, с чего начать, как внедрять и запускать

JavaScipt #2: способы объявления переменных и констант в стандарте ES6+

JavaScript #3: примитивные типы number, string, Infinity, NaN, boolean, null, undefined, Symbol

JavaScript #4: приведение типов, оператор присваивания, функции alert, prompt, confirm

JavaScript #5: арифметические операции: +, -, *, /, **, %, ++, —

JavaScript #6: условные операторы if и switch, сравнение строк, строгое сравнение

JavaScript #7: операторы циклов for, while, do while, операторы break и continue

JavaScript #8: объявление функций по Function Declaration, аргументы по умолчанию

JavaScript #9: функции по Function Expression, анонимные функции, callback-функции

JavaScript #10: анонимные и стрелочные функции, функциональное выражение

JavaScript #11: объекты, цикл for in

JavaScript #12: методы объектов, ключевое слово this

JavaScript #13: клонирование объектов, функции конструкторы

JavaScript #14: массивы (array), методы push, pop, shift, unshift, многомерные массивы

JavaScript #15: методы массивов: splice, slice, indexOf, find, filter, forEach, sort, split, join

JavaScript #16: числовые методы toString, floor, ceil, round, random, parseInt и другие

JavaScript #17: методы строк — length, toLowerCase, indexOf, includes, startsWith, slice, substring

JavaScript #18: коллекции Map и Set

JavaScript #19: деструктурирующее присваивание

JavaScript #20: рекурсивные функции, остаточные аргументы, оператор расширения

JavaScript #21: замыкания, лексическое окружение, вложенные функции

JavaScript #22: свойства name, length и методы call, apply, bind функций

JavaScript #23: создание функций (new Function), функции setTimeout, setInterval и clearInterval

Присваивание

Давайте отметим, что в таблице приоритетов также есть оператор присваивания . У него один из самых низких приоритетов: .

Именно поэтому, когда переменной что-либо присваивают, например, , то сначала выполнится арифметика, а уже затем произойдёт присваивание с сохранением результата в .

Тот факт, что является оператором, а не «магической» конструкцией языка, имеет интересные последствия.

Большинство операторов в JavaScript возвращают значение. Для некоторых это очевидно, например сложение или умножение . Но и оператор присваивания не является исключением.

Вызов записывает в и возвращает его.

Благодаря этому присваивание можно использовать как часть более сложного выражения:

В примере выше результатом будет значение, которое присваивается переменной (то есть ). Потом оно используется для дальнейших вычислений.

Забавное применение присваивания, не так ли? Нам нужно понимать, как это работает, потому что иногда это можно увидеть в JavaScript-библиотеках.

Однако писать самим в таком стиле не рекомендуется. Такие трюки не сделают ваш код более понятным или читабельным.

Рассмотрим ещё одну интересную возможность: цепочку присваиваний.

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

Опять-таки, чтобы код читался легче, лучше разделять подобные конструкции на несколько строчек:

Польза от такого стиля особенно ощущается при быстром просмотре кода.

Как извлечь подстроку

slice

Извлекает часть строки и возвращает новую строку. Обязательный параметр — начало извлечения. Вторым параметром можно установить границу (по умолчанию — до конца строки).

substring

Извлекает символы из строки между двумя указанными индексами. Второй индекс указывать не обязательно. В таком случае будут извлечены все символы от начала до конца строки. В отличие от slice, можно задавать start больше, чем end. Отрицательные значения не поддерживаются, они интерпретируются как 0.

substr

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

7

Как работать с Юникодом

charCodeAt

Возвращает числовое значение Юникода по указанному индексу

Обратите внимание: у букв в верхнем и нижнем регистрах разные коды

fromCharCode

Преобразует числовые значения Юникода в читаемые символы.

Примечание: при работе с эмодзи, редкими математическими символами, иероглифами нужно помнить о суррогатных парах. Это символы, которые записываются двумя 16-битными словами. Длина таких строк — 2.

Суррогатные пары не учитывались при создании JS и методы строк charCodeAt / fromCharCode обрабатывают их некорректно. Правильно работают с суррогатными парами редкие методы String.fromCodePoint и str.codePointAt, которые появились в языке недавно.

Для работы со строками в JS есть не только встроенные методы, но и сторонние библиотеки. Они решают задачи более сложные задачи. Но подключать их имеет смысл только в том случае, если возможностей встроенных методов действительно не хватает.

При составлении этой шпаргалки я пользовался «Современным учебником JavaScript» Ильи Кантора и документацией MDN.

Больше полезных материалов по JS:

  • Шпаргалка по современному JavaScript
  • Примеры задач по JavaScript для подготовки джуна к собеседованию по фронтенду

Доступ к символам

Продемонстрируем, как получить доступ к символам и индексам строки How are you?

"How are you?";

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

"How are you?";

Вывод

r

Мы также можем использовать метод charAt(), чтобы вернуть символ, передавая индекс в качестве параметра.

"Howareyou?".charAt(5);

Вывод

r

Также можно использовать indexOf(), чтобы вернуть индекс первого вхождения символа в строке.

"How are you?".indexOf("o");

Вывод

1

Несмотря на то, что символ «o» появляется в строке How are you? дважды, indexOf() вернёт позицию первого вхождения.

lastIndexOf() используется, чтобы найти последнее вхождение.

"How are you?".lastIndexOf("o");

Вывод

9

Оба метода также можно использовать для поиска нескольких символов в строке. Они вернут индекс первого символа.

"How are you?".indexOf("are");

Вывод

4

А вот метод slice() вернёт символы между двумя индексами.

"How are you?".slice(8, 11);

Вывод

you

Обратите внимание на то, что 11– это ?, но? не входит в результирующую строку. slice() вернёт всё, что между указанными значениями индекса

Если второй параметр опускается, slice() вернёт всё, начиная от первого параметра до конца строки.

"How are you?".slice(8);

Вывод

you?

Методы charAt() и slice() помогут получить строковые значения на основании индекса. А indexOf() и lastIndexOf() делают противоположное, возвращая индексы на основании переданной им строки.

Свойства строк

Свойство Описание
constructor возвращает функцию-конструктор строки

var str = «Hello world!»;
var result = str.constructor;
//result: function String() { }

1
2
3

varstr=»Hello world!»;

varresult=str.constructor;

//result: function String() { }

length возвращает длину (количество символов) строки

var str = «Hello world!»;
var result = str.length;
//result: 12, т.к. отчет символов, в том числе пробелов, начинается с 0

1
2
3

varstr=»Hello world!»;

varresult=str.length;

//result: 12, т.к. отчет символов, в том числе пробелов, начинается с 0

prototype позволяет добавить свойства и методы к объекту (если строка — объект)

function student(name, surname, faculty) {
this.firstName = name;
this.lastName = surname;
this.faculty = faculty;
}
student.prototype.degree = «Master of Computer Science in Economy»;
var Oleg = new student(«Oleg», «Palshin», «Economic»);
var result = Oleg.degree;
//result: «Master of Computer Science in Economy»

1
2
3
4
5
6
7
8
9

functionstudent(name,surname,faculty){

this.firstName=name;

this.lastName=surname;

this.faculty=faculty;

}

student.prototype.degree=»Master of Computer Science in Economy»;

varOleg=newstudent(«Oleg»,»Palshin»,»Economic»);

varresult=Oleg.degree;

//result: «Master of Computer Science in Economy»

Синтаксис

Объект регулярного выражения . Сопоставление заменяется возвращаемым значением второго параметра.

Строка, заменяемая на

Обратите внимание, будет заменено только первое вхождение искомой строки.

Строка, заменяющая подстроку из первого параметра. Поддерживает несколько специальных шаблонов замены; смотрите ниже раздел .

Функция, вызываемая для создания новой подстроки (помещаемой вместо подстроки из первого параметра)

Аргументы, передаваемые функции, описаны ниже в разделе .

Обратите внимание: аргумент не работает в ядре v8 (движок JavaScript в Chrome и NodeJs). Строка, задающая комбинацию . Параметр в методе является нестандартным расширением. Вместо использования этого параметра используйте объект с соответствующими флагами. Значение этого параметра, если он используется, должно быть строкой, состоящей из одного или более следующих символов, следующим образом влияющих на обработку регулярного выражения:

глобальное сопоставление

игнорировать регистр

сопоставление по нескольким строкам

«липкий» поиск, сопоставление начинается с текущей позиции в строке

Новая строка с некоторыми или всеми сопоставлениями шаблона, заменёнными на заменитель.

substring

Метод substring похож на slice тем, что мы указываем начальный и конечный индекс для выборки. Но в отличие от slice, мы не можем использовать отрицательные числа.

В следующем примере мы покажем, как достичь тех же самых результатов, используя substring:

var str = 'невероятно';
var str2 = str.substring(2);
console.log( str2 ); // вероятно

var str3 = str.substring(2, 4);
console.log( str3 ); // ве

// используем str.length для указания индекса, считая с конца строки
var str4 = str.substring( str.length -4 );
console.log( str4 ); // ятно

var str5 = str.substring( str.length -4, str.length -2 );
console.log( str5 ); // ят

Мы получили те же самые результаты, используя метод substring. Но из-за того, что отрицательные числа не поддерживаются, его довольно неудобно использовать, если нужно указать индекс, начиная с конца строки.

Итого

Существует 3 наиболее широко используемых преобразования: строковое, численное и логическое.

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

– Происходит в математических операциях. Может быть вызвано с помощью .

Преобразование подчиняется правилам:

Значение Становится…
Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то получаем , иначе из непустой строки «считывается» число. При ошибке результат .

– Происходит в логических операциях. Может быть вызвано с помощью .

Подчиняется правилам:

Значение Становится…
, , , ,
любое другое значение

Большую часть из этих правил легко понять и запомнить. Особые случаи, в которых часто допускаются ошибки:

  • при численном преобразовании становится , не .
  • и строки из одних пробелов типа при логическом преобразовании всегда .

В этой главе мы не говорили об объектах. Мы вернёмся к ним позже, в главе Преобразование объектов в примитивы, посвящённой только объектам, сразу после того, как узнаем больше про основы JavaScript.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий