Строки

String in JavaScript 'Это то же строка'

  • Строка это последовательность символов
    • Текст оборачиваетя в одинарные ('') или двойные кавычки ("")

In [7]:
var str1 = "Текст, сохаренный в переменной";
var str2 = 'Текст заключенный в одинарные кавычки';
console.log(str1,'\n',str2)


Текст, сохаренный в переменной 
 Текст заключенный в одинарные кавычки
Out[7]:
undefined
  • Строка это примитивный тип
    • он копирует / хранит по значению
  • Строка так же неизменяемы тип
    • Всякий раз, когда строка меняется, копируется новая строка

Обертка строки new String

  • Строка это примитивный тип, она имеет объект обертку
  • Примитивный тип хранит только значение
    • Когда свойство вызывается, движок JS конвертирует примитив в соответствующий ему тип объекта и вызывает свойство
  • Since primitive type wrappers are of type object, properties can be attached to them

In [18]:
var str = 'пример';
str.length;


Out[18]:
6

In [19]:
var str = 'пример';
var tempStr = new String(str);
tempStr.length;


Out[19]:
6

От объекта к примитивному типу

  • JavaScript имеет простой синтаксис
    • От string до number
  • Переход от обьекта к примитиву включает
    • new String('…') - создается строчный объект
    • String(strObject) - создается строчный примитив

In [21]:
var base = 'string';
var strObj = new String(base);
var str = String(strObj);
str


Out[21]:
'string'

Методы строк

  • string.length
    • Возвращает число символов в строке
  • Индексация (string[index])
    • Получает один символ из строки по его индексу
    • Если индекс выходит за пределы диапазона индекса символов, возвращается undefined
      • string[-1] or string[string.length]
  • charAt(index)
    • получает один символ из строки на месте индекса
      • Сильно похож на Индексацию
  • string.concat(string2)
    • Возвращает новую строку, состоящую из двух строк
  • string.replace(str1, str2)
    • Заменяет вхождение str1 в str2
  • string.search(regex)
    • Поиск подстроки с использованием регулярного выражения
  • string.indexOf(substring [,position])
    • Возвращает крайний левый вхождение substring в строку следующую после position
      • По умолчанию позиция начинается с 0 индекса
    • Если строка не содержит substring, возвращается -1
  • string.lastIndexOf(substring [,position])
    • Возвращает крайнее правое вхождение substring в строку которое предшествует position
      • Позиция опциональая, значение по умолчанию string.length
    • Если строка не содержит подстроку substring, возвращает -1
  • string.split(separator)
    • Разделяет строку по separator и возвращает массив строк, содержащий разделенные части
    • Сепаратор может быть регулярным выражением
  • string.trim()
    • Удаляет пробелы в начале и конце строки
  • str.trimLeft(), str.trimRight()
    • Удаляет пробелы с лева / с права от строки
  • string.substr(start, length)
    • Возврощает подстроку начинающуюся со start и заканчивающуюся через length символов
    • length опционально
  • string.substring(start, end)
    • Возвращает подстроку начинающуюся с позиции start и заканчивающуюся позицией end
  • string.valueOf()
    • Возвращает примитивное значение строки

In [24]:
var str = 'Пример строки для того, чтобы вывести ее';

    console.log(str);
    console.log('length = ' + str.length);

    console.log('str[' + 4 + '] = ' + str[4]);
    console.log('str.charAt(' + 4 + ') = ' + str.charAt(4));

    console.log('"' + str + '".indexOf("string") = ' + str.indexOf('строки'));
    console.log('"' + str + '".indexOf("string",8) = ' + str.indexOf('чтобы', 8));
    console.log('"' + str + '".indexOf("string",23) = ' + str.indexOf('вывести', 23));

    console.log('"' + str + '".substr(3,5) = "' + str.substr(3, 5) + '"');
    console.log('"' + str + '".substring(3,5) = "' + str.substring(3, 5) + '"');


Пример строки для того, чтобы вывести ее
length = 40
str[4] = е
str.charAt(4) = е
"Пример строки для того, чтобы вывести ее".indexOf("string") = 7
"Пример строки для того, чтобы вывести ее".indexOf("string",8) = 24
"Пример строки для того, чтобы вывести ее".indexOf("string",23) = 30
"Пример строки для того, чтобы вывести ее".substr(3,5) = "мер с"
"Пример строки для того, чтобы вывести ее".substring(3,5) = "ме"
Out[24]:
undefined

Конкатенация строк 'Имя' + ' ' + 'Фамилия'

  • Строка это неизменяемый тип
    • Значение не может быть изменено
    • Вместо этого создается новая строка
  • Существует несколько способов конкатенации строк
var strConcat1 = str1 + str2;
var strConcat2 = str.concat(str2);
  • Обьединение строк это ресурсозатратная
    • Каждая конкатенация выделяет память
  • Обьединение строк это наиболее часто используемая операция
    • Тем не менее достаточно сложно оптимизировать эту задачу
    • Каждый браузер оптимизирует эту операцию по своему усмотрению
    • Старые браузер очень медленно конкатенируют используя +
  • Если вы поддерживаете старые браузеры то используйте array.join("") для объедиения строк
  • Работает так же как построитель строки
    • Медленнее в современных браузерах
[].push(srt1, str2, str3, ).join('');

In [30]:
function StringBuilder() {
    return {
        strs: [],
        len: 0,
        append: function (str) {
            this.strs[this.len++] = str;
            return this;
        },
        toString: function () {
            return this.strs.join("");
        }
    };
}

var count = 20;
var s = 'Привет мир!';

var str = '';
for (var i = 0; i < count; i++) {
    str += s + s + s + s + s;
}

var stringBuilder = new StringBuilder();

for (var i = 0; i < count; i++) {
    stringBuilder.append(s).append(s).append(s).append(s).append(s);
}

var result = stringBuilder.toString();
console.log(result);


Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!Привет мир!
Out[30]:
undefined

Управляющие символы

  • Как на счет управляющих последовательностей?
    • Замена зарезервированых символов их управляющими последовательностями
    • Превентивная JavaScript внедрение
  • При использовании JavaScript на стороне клиента, зарезервированными символами являются <, >, &, ' и "
var script = document.createElement('script');
script.innerHTML = 'document.location = \'http://bad_place.com\'';
document.body.appendChild(script);
  • Выполняется когда происходит замена зарезервированного символа, его управляющей последовательностью
    • Может быть добавлено к прототипу строки
String.prototype.htmlEscape = function () {
  let escapedStr = String(this)
      .replace(/&/g, '&amp;');
      .replace(/</g, '&lt;');
      .replace(/>/g, '&gt;');
      .replace(/"/g, '&quot;');
      .replace(/'/g, '&#39');
  return escapedStr;
}

Расширения строковых методов

  • Обрезание строки
    • string.trim(), string.trimLeft(), string.trimRight()
      • Поддерживается всеми современными браузерами
      • Для старых браузеров используйте shim
      • string.trimChars(chars), string.trimLeftChars(chars), string.trimRightChars(chars)
      • Удалить не-проблельные символы
      • Нет нативной реализации

In [40]:
(function () {
if (!String.prototype.contains) {
    String.prototype.contains = function (searchPattern) {
        var patternLen = searchPattern.length;
        for (var i = 0, length = this.length - patternLen; i < length; i++) {
            var isMatch = true;
            for (var j = 0; j < patternLen; j++) {
                if (searchPattern[j] !== this[i + j]) {
                    isMatch = false;
                    break;
                }
            }
            if (isMatch) {
                return true;
            }
        }
    }
}

if (!String.prototype.toCharArray) {
    String.prototype.toCharArray = function () {
        return this.split('');
    }
}

if (!String.prototype.trimLeft) {
    String.prototype.trimLeft = function () {
        return this.replace(/^\s+/, '');
    }
}
if (!String.prototype.trimRight) {
    String.prototype.trimRight = function () {
        return this.replace(/\s+$/, '');
    }
}

if (!String.prototype.trim) {
    String.prototype.trim = function () {
        return this.trimLeft().trimRight();
    }
}

if (!String.prototype.trimLeftChars) {
    String.prototype.trimLeftChars = function (chars) {
        var regEx = new RegExp('^[' + chars + ']+');
        return this.replace(regEx, '');
    }
}

if (!String.prototype.trimRightChars) {
    String.prototype.trimRightChars = function (chars) {

        var regEx = new RegExp('[' + chars + ']+$');
        return this.replace(regEx, '');
    }
}

if (!String.prototype.trimChars) {
    String.prototype.trimChars = function (chars) {
        return this.trimLeftChars(chars).trimRightChars(chars);
    }
}

if (!String.prototype.htmlEscape) {
    String.prototype.htmlEscape = function () {
        return this.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39').replace(/ /g, '&nbsp;');
    }
}
if (!String.prototype.padLeft) {
    String.prototype.padLeft = function (count, char) {
        char = char || ' ';
        if (char.length > 1) {
            return String(this);
        }
        if (this.length >= count) {
            return String(this);
        }
        var str = String(this);
        for (var i = 0, thisLen = str.length; i < count - thisLen; i++) {
            str = char + str;
        }
        return str;
    }
}

if (!String.prototype.padRight) {
    String.prototype.padRight = function (count, char) {
        char = char || ' ';
        if (char.length > 1) {
            return String(this);
        }
        if (this.length >= count) {
            return String(this);
        }
        var str = String(this);
        for (var i = 0, thisLen = this.length; i < count - thisLen; i++) {
            str += char;
        }
        return str;
    }
}
})();


var str = '              хали гали пара трупер                ';

console.log('обрезаем пробелы');
console.log('оригинал: !' + str + '!');

console.log('обрезка: !' + str.trim() + '!');
console.log('обрезать слева: !' + str.trimLeft() + '!');
console.log('обрезать справа: !' + str.trimRight() + '!');

str = 'хали гали пара трупер';
var chars = 'пер';

console.log();
console.log('обрезка символов: ' + chars);

console.log('оригинал: !' + str + '!');
console.log('обрезанная: !' + str.trimChars(chars) + '!');
console.log('обрезка слева: !' + str.trimLeftChars(chars) + '!');
console.log('обрезка справа: !' + str.trimRightChars(chars) + '!');


обрезаем пробелы
оригинал: !              хали гали пара трупер                !
обрезка: !хали гали пара трупер!
обрезать слева: !хали гали пара трупер                !
обрезать справа: !              хали гали пара трупер!

обрезка символов: пер
оригинал: !хали гали пара трупер!
обрезанная: !хали гали пара тру!
обрезка слева: !хали гали пара трупер!
обрезка справа: !хали гали пара тру!
Out[40]:
undefined
  • Отступ строки
  • str.padLeft(count [,char]), str.padRight(count [,char])
    • Сдвигает строку влево или вправо
    • Заполняет пространство пробелами или другими символами
    • Нет собственной реализации

In [39]:
var string = 'Пример строки';
    console.log('оригинал: "' + string + '"');

    console.log('padLeft(30) ->   "' + string.padLeft(30).htmlEscape() + '"');
    console.log('padRight(30) ->  "' + string.padRight(30).htmlEscape() + '"');
    console.log('padLeft(30) ->   "' + string.padLeft(30,"-")+ '"');
    console.log('padRight(30) ->  "' + string.padRight(30,"-").htmlEscape() + '"');


оригинал: "Пример строки"
padLeft(30) ->   "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Пример&nbsp;строки"
padRight(30) ->  "Пример&nbsp;строки&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
padLeft(30) ->   "-----------------Пример строки"
padRight(30) ->  "Пример&nbsp;строки-----------------"
Out[39]:
undefined