Понимание строки Javascript

Понимание строки Javascript

Тип String - это базовый тип во всех языках программирования. Очень важно понимать это и пользоваться его хорошими функциями и советами, чтобы код мог думать о производительности.

Создать строки

В javascript у нас есть 2 разных варианта создания строковой переменной:

1. Строковые литералы
2. Создание объекта

//String literals: 
var myString = 'Hello world';
var myOtherString = "Hello universe";

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

//Object creation:
console.log(new String("Terminator")); //"Terminator"
console.log(new String([1,2,3])); //"1,2,3"
console.log(new String(["1","2","3"])); //"1,2,3"
console.log(new String({a:2})); //"[object Object]" This is the default conversion from an object to string.

Что означает «[объект Объект]»?

Вероятно, вы ожидали представления JSON. «Объект» - это естественное представление параметра, а «Объект» - это тип. Взгляните на эти примеры:

Object.prototype.toString.call(new Date()) //[object Date]
Object.prototype.toString.call(undefined) //[object Undefined]
Object.prototype.toString.call([]) //[object Array]

Но если вам нужно строковое представление объекта, просто выполните:

JSON.stringify({a:3}) //"{"a":3}"

Литералы шаблона

Есть еще один способ создать строковую переменную в новом ES6 (также известном как ECMAScript 2015).

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

var myString = `Hello world
                I am learning Javascript`;
console.log(`1 + 1 = ${1+1} -> Sum operation`); // "1 + 1 = 2 -> Sum operation"

В Vanilla Javascript (обычный javascript, который работает в большинстве браузеров), чтобы получить тот же результат, что и в предыдущем примере, вам необходимо сделать:

console.log('1 + 1 = ' + (1 + 1) + ' -> Sum operation'); // "1 + 1 = 2 -> Sum operation"

Помните, что нельзя использовать функции ES6 в каждом браузере. Для этого вам нужно использовать такой плагин, как Babel, который позволяет использовать новейшие функции javascript.

Если вы хотите узнать больше о ES6 или ES2015, прочтите эту статью:

Неизменность

Одним из важных свойств строкового типа является то, что он не может быть изменен. Что это означает?

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

Вы не можете изменить значение числа 3, или значение логического типа, например true. То же самое и со строками: вы не можете изменить значение «Привет, я рассказываю историю на Medium!»

var myVar = "Hello world!";
myVar = "How are you?";

После присвоения нового значения myVar мы теряем ссылку на предыдущее значение. Старое значение будет находиться в памяти до тех пор, пока функция, в которой объявлена ​​эта переменная, не будет уничтожена, поскольку сборщик мусора движка javascript удалит неиспользуемые ссылки.

То же самое происходит, когда мы объединяем строки:

var myVar = "Hello world!";
myVar += " How are you?";

А как насчет методов replace () или toUpperCase ()? Они меняют строковые значения?

Нет, ничто не может изменить значение строки. Эти методы каждый раз возвращают новые строковые значения.

Можно ли рассматривать строки как массивы?

Это очень хороший вопрос, но ответ - «да» и «нет». Это потому, что мы можем получить доступ к char по его индексу с помощью [], но мы не можем изменить его значение.

var myVar = "Hello world!";
console.log(myVar[4]); // "o"
//We can do the same with "charAt()" method.
console.log(myVar.charAt(4)); // "o" 

Но что, если мы попробуем сделать следующее:

myVar[4] = 'A';

Это не правильно! Помните Неизменяемость? Что ж, это все еще в силе! Мы не можем это изменить. Вероятно, нам придется использовать метод replace () или что-то еще, но это вернет новую строку.

Escape-последовательности в строках

Символ обратной косой черты (\) имеет особое назначение в строках. Если мы объединили его с другим символом, он представляет собой символ, который иначе не может быть представлен в строке. Например, \ n - это escape-последовательность, которая представляет символ новой строки.

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

var myStr = 'Hi, I\'m a Javascript developer!';

Результат: Привет, я разработчик Javascript!

Как можно объединить строки?

Это очень распространенное явление, но мы должны быть осторожны, если нам придется выполнять много операций. В таких языках, как C # или Java, у нас есть специальные классы, которые позволяют нам делать это с высокой производительностью. К сожалению, это не относится к javascript.

Но есть как минимум 3 разных способа сделать это:

1. + оператор
2. concat () метод
3. join () метод

Оператор плюс (+)

Это самый простой способ объединить строки:

var myVar = 'hello world,';
myVar += ' how are you?'; 

Concat метод

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

var myVar = 'hello world,';
myVar.concat(' how are you?', ' how was your week?');

Метод соединения

Метод join() объединяет все элементы массива в строку и возвращает эту строку.

var myVarArray = ['hello', 'world!'];
var myVarString = myVarArray.join(' ');

Так? Какой самый быстрый? Какой из них мы должны использовать?

Мы должны использовать то, что лучше подходит для нашего конкретного случая. Я имею в виду, что если вы просто объединяете 2 или 3 короткие строки, не стесняйтесь использовать любой метод, какой захотите. Но если у вас много длинных строк, вы должны знать, что метод concat является самым быстрым (в большинстве случаев). Конечно, это зависит от браузера, ОС и других факторов.

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

Это мой результат:

Chrome 64.0.3282 / Mac OS X 10.13.3

1. + оператор (самый быстрый)
2. concat (на 16% медленнее)
3. присоединиться (на 73% медленнее)

Firefox 58.0.0 / Mac OS X 10.13.0

1. concat (самый быстрый)
2. + оператор (на 3% медленнее)
3. присоединиться (на 32% медленнее)

Chrome 65.0.3325 / Windows 10

1. concat (самый быстрый)
2. + оператор (на 4% медленнее)
3. присоединиться (на 70% медленнее)

Opera 51.0.2830 / Windows 10

1. concat (самый быстрый)
2. + оператор (на 8% медленнее)
3. присоединиться (на 66% медленнее)

IE 9.0.0 / Windows 7

1. + оператор (самый быстрый)
2. concat (на 36% медленнее)
3. присоединиться (на 40% медленнее)

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

Это то, что мы все считаем полезным. Что ж, позвольте мне сказать вам, что у нас есть как минимум 3 варианта:

1. indexOf () метод
2. включает () метод
3. Regex (регулярные выражения)

indexOf метод

Метод indexOf() возвращает индекс в вызывающем объекте String первого вхождения указанного значения, начиная поиск с указанного индекса. Возвращает -1, если значение не найдено.

var myStr = 'Hello world, I am learning javascript! I love it!';
console.log(myStr.indexOf('world')); // 6
console.log(myStr.indexOf('car')); // -1

включает метод

Прежде всего, имейте в виду, что этот метод доступен только в ES6. Это означает, что он доступен не во всех браузерах.

Этот метод возвращает true, если искомая строка включена в другую строку. Это хороший метод, если нам не нужно много информации.

var myStr = 'Hello world!";
console.log(myStr.includes('world')); // true

Обычные выражения

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

substring (), substr () или slice ()?

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

подстрока ()

Параметры, которые мы можем передать методу подстроки, - это индексы. Устанавливаем начальный и конечный индекс. Этот метод возвращает строку, содержащуюся между этими двумя.

str.substring(indexStart[, indexEnd])

substr ()

Основное отличие от substring () заключается в том, что этот метод принимает в качестве второго параметра длину подстроки, которую мы хотим получить.

str.substr(start[, length])

Давайте посмотрим на этот пример:

"Hello world!".substring(2, 5); //"llo"
"Hello world!".substr(2, 5);    //"llo w"

кусочек()

Этот метод очень похож на substring (). Он работает с startIndex и endIndex.

"Hello world!".substring(2, 5); //"llo"
"Hello world!".slice(2, 5); //"llo"

Но при работе с отрицательными индексами есть разница:

"Hello world!".substring(6, -2); //"Hello "
"Hello world!".slice(6, -2);     //"worl"

Что только что произошло? Что ж, если endIndex в substring () ниже, чем startIndex, то они меняются местами. Но в случае slice () он обрабатывается как strLength + endIndex, где strLength - длина строки (например, если endIndex равно -3, он обрабатывается как strLength - 3).

Используете ли вы ♥ Javascript?

Мы нанимаем в Воркаст » https://www.workast.io/jobs

О Workast

Workast - это встроенный в Slack инструмент управления задачами, который помогает командам организовывать свои повседневные задачи, управлять проектами и отслеживать производительность. С более чем 100 000 активных пользователей Workast является ботом номер один на рынке Slack. Workast - это компания, поддерживаемая MuckerCapital, базирующаяся в Лос-Анджелесе, Калифорния. Для получения дополнительной информации посетите www.workast.io.