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

Skaizer, 27.07.2008

Перевод статьи «Strings»
Оригинал: quirksmode.org/js/strings.htm

stringВ этой статье речь пойдет о том, что такое строки в JavaScript и методах работы с ними.

Строки — это просто группы символов, такие как «JavaScript», «Hello world!», «http://www.quirksmode.org» или даже «14». Для программирования на JavaScript Вам необходимо знать, что такое строки и как с ними работать, т. к. использовать их придется очень часто. Многие вещи, такие как URL-страницы, значения CSS-параметров и элементов ввода форм — все является строками.

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

Основы работы со строками

Давайте рассмотрим основы работы со строками в JavaScript.

Использование кавычек

Когда Вы объявляете строки в JavaScript или работаете с ними, всегда заключайте их в одинарные или двойные кавычки. Этим Вы объясняете браузеру, что он имеет дело со строкой. Не смешивайте использование кавычек в коде, если Вы начали строку с одинарной кавычки, а закончили двойной, JavaScript не поймет, что Вы имели в виду. Как правило, я использую одинарные кавычки для работы со строками, так как двойные кавычки я решил использовать для HTML, а одинарные — для JavaScript. Конечно, Вы можете делать все по-другому, но я советую вам придумать подобное правило для себя.

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

var a = 'Hello world!';
var b = 'I am a student.';

Сейчас мы объявили две переменные, «a» и «b», и присвоили им строковые значения. После этого мы можем с ними работать, но сначала решим одну проблему: допустим, я написал:

var b = 'I'm a student.';

Строка содержит в себе лишнюю одинарную кавычку, и JavaScript думает, что строка закончена и выводит сообщение об ошибке, не понимая, что следует дальше. Поэтому Вам нужно экранировать кавычку, сообщая браузеру, что её нужно рассматривать как символ, а не как окончание строки. Это осуществляется с помощью «обратного слеша» перед кавычкой:

var b = 'I\'m a student.';

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

var b = 'I\'m a "student".';

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

Встроенные функции

После определения строк можно начать их использование. Например, Вы можете соединить одну строку с другой, или взять из строки «b» подстроку, состоящую из второго—четвертого символов и вставить их в середину строки «a», или определить какой символ стоит двенадцатым в «a», сколько символов в «b», есть ли в них буква «q» и т. д.

Для этого Вы можете использовать встроенные функции, которые JavaScript предопределяет для каждой строки. Одна из них — «length» — возвращает длину строки. То есть если Вы хотите вычислить длину «Hello world!», напишите:

var c = 'Hello world!'.length;

Ранее мы присвоили эту строку переменной «а». Таким образом, Вы сделали переменную «a» строкой, поэтому к ней тоже применима функция «length», и следующая операция даст такой же результат:

var c = a.length;

Запомните, что Вы можете использовать «length» для любой строки — это встроенная функция. Вы можете вычислить длину любой строки, например: «location.href» или «document.title» или объявленной Вами.

Ниже я представлю список распространенных встроенных методов и свойств.

Строки и числа

В некоторых языках программирования от Вас требуется указывать, является ли переменная числом или строкой, перед тем, как делать с ней что-либо ещё. JavaScript проще относится к разнице между строками и числами. Фактически Вы даже можете складывать числа со строками:

var c = a + 12;

В некоторых языках программирования обработка такой строки приведет к ошибке. Всё же «a» — это строка, а «12» — число. Однако JavaScript пытается решить проблему, предполагая, что «12» — тоже строка. Таким образом «с» принимает значение «Hello world!12». Значит, если Вы используете «+» со строкой и числом, JavaScript пытается сделать из числа строку. Если же Вы применяете математические операции к строке, JavaScript пробует превратить её в число. При отсутствии возможности перевода строки в число (например, из-за наличия в ней букв), JavaScript возвращает NaN — «Not a Number — не является числом».

Наконец, в JavaScript нет разницы между целыми величинами и числами с плавающей точкой.

Число → строка

Для преобразования числа в строку введите:

var c = (16 * 24) / 49 + 12;
d = c.toString();

После этого Вы можете применять к «d» все строковые методы, а «c» все ещё содержит число.

Строка → число

Если Вы хотите преобразовать строку в число, сначала убедитесь, что она состоит только из символов 0—9. Для этого я просто умножаю строку на 1.

var c = '1234';
d = c * 1;

Так как умножение производится только с числами, JavaScript превращает строку в число, если это возможно. В противном случае, результат — NaN.

Заметим, если написать:

var c = '1234';
d = c + 0;

Результатом будет «12340», потому что JavaScript использует «+» для соединения строк, а не их сложения.

Строковые свойства и методы

Так что же мы можем делать со строками? Объединение — это особый случай, но все остальные команды (методы) могут использоваться с любой строкой с помощью конструкции:

имя_строки.метод();

Список встроенных методов JavaScript для работы со строками

Конкатенация — объединение строк

Во-первых, Вы можете объединить строки, сложив их вместе, вот так:

document.write(a + b);

в результате получится: «Hello world!I am a student.». Но, конечно же, Вы хотите, чтобы между предложениями был пробел. Для этого запишем код следующим образом:

document.write(a + ' ' + b);

Так мы соединим три строки: «а», «' '» (один пробел) и «b», в итоге получив: «Hello world! I am a student.»

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

document.write (a + 3 * 3 + b);

Сейчас мы соединяем строку «а», затем результат выражения «3 * 3», рассматриваемый как строка, и «b», получая: «Hello world!9I am a student.»

При использовании сложения нужно быть внимательным. Команда

document.write (a + 3 + 3 + b);

соединяет 4 строки: «а», «3», «3» и «b», потому что «+» в данном случае означает «соединить строки», а не «сложить» и в результате: «Hello world!33I am a student.». Если Вы хотите сложить 3 и 3 перед созданием строки, используйте скобки.

document.write (a + (3 + 3) + b);

Данное выражение соединяет строку «а», результат выражения «3 + 3» и «b», в итоге: «Hello world!6I am a student.».

indexOf

Один из самых широко используемых встроенных методов это «indexOf». Каждый символ имеет свой индекс, содержащий номер его позиции в строке. Заметим, что индекс первого символа — 0, второго — 1 и т. д. Таким образом, индекс символа «w» в сроке «а» — 6.

Используя «indexOf» мы можем вывести индекс символа. Напишите «.indexOf(' ')» после названия строки и вставьте искомый символ между кавычками. Например:

var a = 'Hello world!';
document.write(a.indexOf('w'));

возвратит 6. Если символ встречается несколько раз, этот метод возвращает первое вхождение. То есть

document.write(a.indexOf('o'));

возвратит 4, потому что это индекс первой «o» в строке.

Вы также можете искать комбинацию символов. (Конечно, это тоже строка, но, чтобы избежать путаницы, я не буду называть её так). «indexOf» возвращает позицию первого символа комбинации. Например:

document.write(a.indexOf('o w'));

тоже возвратит 4, потому что это индекс «o».

Более того, возможен поиск символа после определенного индекса. Если Вы введете

document.write(a.indexOf('o', 5));

то получите индекс первой «o», следующей за символом с индексом 5 (это пробел), то есть результат будет — 7.

Если символ или комбинация не встречается в строке, «indexOf» возвратит «-1». Это, по сути, самое популярное применение «indexOf»: проверка существования определенной комбинации символов. Оно является ядром скрипта, определяющего браузер. Для определения IE Вы берете строку:

navigator.userAgent;

и проверяете, содержит ли она «MSIE»:

if(navigator.userAgent.indexOf('MSIE') != -1) {
//Какие-либо дествия с Internet Explorer
}

Если индекс «MSIE» — не «-1» (если «MSIE» встречается где-либо в строке), то текущий браузер — IE.

lastIndexOf

Также существует метод «lastIndexOf», который возвращает последнее вхождение символа или комбинации. Он действует противоположно «indexOf». Команда

var b = 'I am a student.';
document.write(b.lastIndexOf('t'));

возвратит 13, потому что это индекс последней «t» в строке.

charAt

Метод «charAt» возвращает символ, стоящий на указанной позиции. Например, когда Вы вводите

var b = 'I am a student.';
document.write(b.charAt(5));

в результате получается «a», так как это символ на шестой позиции (помните, что индекс первого символа начинается с 0).

length

Метод «length» возвращает длину строки.

var b = 'I am a student.';
document.write(b.length);

возвратит «15». Длина строки на 1 больше, чем индекс последнего символа.

split

«split» — это специальный метод, позволяющий разделить строку по определенным символам. Используется, когда результат необходимо заносить в массив, а не в простую переменную. Давайте разделим «b» по пробелам:

var b = 'I am a student.'
var temp = new Array();
temp = b.split(' ');

Теперь строка разбита на 4 подстроки, которые помещаются в массив «temp». Сами пробелы исчезли.

temp[0] = 'I';
temp[1] = 'am';
temp[2] = 'a';
temp[3] = 'student';

substring

Метод «substring» используется для выделения части строки. Синтаксис метода: «.substring(первый_индекс, последний_индекс)». Например:

var a = 'Hello world!';
document.write(a.substring(4, 8));

возвратит «o wo», от первой «o» (индекс 4) до второй (индекс 7). Заметьте, что «r» (индекс 8) не является частью подстроки.

Также можно написать:

var a = 'Hello world!';
document.write(a.substring(4));

Это даст целую подстроку «o world!», начиная от символа с индексом 4 и до конца строки.

substr

Также есть метод «substr», работающий немного по-другому. В качестве второго аргумента он использует не номер индекса, а количество символов. То есть

document.write(a.substr(4, 8));

возвращает 8 символов, начиная от символа с индексом 4 («o»), то есть в результате получаем: «o world!»

toLowerCase и toUpperCase

Наконец, 2 метода, которые иногда могут Вам пригодиться: «toLowerCase» переводит всю строку в нижний регистр, а «toUpperCase» — в верхний.

var b = 'I am a student.';
document.write(b.toUpperCase());

В результате получим «I AM A STUDENT.».

Спонсор поста: Агентство «Web++» — создание и раскрутка сайтов в Волгограде.

Похожие темы

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

Вам понравился наш блог, хотите следить за обновлениями? Подпишитесь на RSS рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

Категории: JavaScript, Переводы | Комментировать

RSS-лента комментариев к этой статье | Обратная ссылка (trackback link)

Комментарии (46)

  1. Дима / 29.09.2008 в 16:13

    Спасибо за статью!
    P.S. Автор не бей меня, ну уж очень хотелось отписаться на странице с PR 5 =)

  2. Сергей / 09.10.2008 в 06:43

    Здравствуйте! вот такая проблема возникла
    Странно но у меня не работает следующий код:

    str = document.location;
document.write(str);
if(str.indexOf('home') != -1) {
document.write(" ура мы нашли слово home")
}

    данный скрипт у меня выводит
    file://moidomen/files/home/Desktop/test.html
    то есть срабатывает document.write(str);
    но условие не срабатывает, то есть не выводится «ура мы нашли слово home»

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

    str = "file://moidomen/files/home/Desktop/test.html";
document.write(str);

if(str.indexof('home') !=-1) {
document.write(" ура мы нашли слово home")
}

    выведет как переменную str так и ура мы нашли слово home
    почему так ? )

  3. wide / 09.10.2008 в 12:04

    А есть ли функции замены подстроки аналог strreplase в PHP? а то уж очень лень циклами это все делать…

  4. Skaizer / 09.10.2008 в 15:56

    Сергей, используйте

    str = document.location.href;

    Ваш пример:

    str = document.location.href;
document.write(str);

if(str.indexOf('home') !=-1) {
document.write('ура мы нашли слово home');
}

    wide, не совсем аналог, но функциональность почти та же JavaScript replace() Method.

  5. Сергей / 10.10.2008 в 11:07

    Ок спасибо :) действительно данный пример работает )!

  6. Вилли / 22.10.2008 в 16:37

    Мне нужно вствить тире между байтами в строке. Например, имеем строку 12354789, мне нужно разбить ее и получить следующую: 1-23-45-67-89.
    Как можно вставить тире в строку, без использования буферной переменной?

  7. Octane / 22.10.2008 в 23:41

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

    var i, number = '123456789'.split('').reverse(), length = number.length, key = 0, result = [];
if(length) {
  for(i = 0; i < length; i++) {
    result.push(number[i]);
    key++;
    if(key == 2) {
      key = 0;
      result.push('-')
    }
  }
}
result = result.reverse().join('');
alert(result);
  8. Павел / 08.12.2008 в 00:39

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

  9. Stepler / 08.12.2008 в 15:00

    Вот один из вариантов решения:

    var str = "как строку разбивать по принципу четности слов используя пробел в качестве разделителя";
var arrStr = str.split(' ');
var len = arrStr.length;
var Arr1 = new Array();
var Arr2 = new Array();
var j = 0;

if (len%2 != 0) {
  len--;
  Arr1[len/2] = arrStr[len];
}

for (var i=0; i<len; i=i+2){
  Arr1[j] = arrStr[i];
  Arr2[j] = arrStr[i+1];
  j++;
}

    В результате все нечетные слова будут находится в массиве Arr1, а четные в Arr2.

  10. Павел / 08.12.2008 в 16:41

    Stepler, спасибо огромное.
    только из предыдущего вопроса таинственным образом пропала часть:»а полученные слова забирать в для каждого нечетного и для каждого четного слова?».
    вот тут как быть?

  11. Павел / 08.12.2008 в 16:43

    блииин))
    забирать в «спан айди=1″ для каждого нечетного и «спан айди=2″ для каждого четного слова?

  12. Stepler / 08.12.2008 в 17:32
    var str = "как строку разбивать по принципу четности слов используя пробел в качестве разделителя";

    Эта строка только для примера, вместо нее вы можете вставить любой текст :)

    забирать в “спан айди=1″ для каждого нечетного и “спан айди=2″ для каждого четного слова?

    Не совсем понял этот вопрос, поясните поподробнее, пожалуйста…

  13. Павел / 08.12.2008 в 19:31

    к сожалению сайт не пропускает html-теги, или я такое дерево, поэтому опишу своими словами :)
    есть строка «как строку разбивать». как создать массив по четности\нечетности вы объяснили, спасибо. но дополнительно к этому надо каждое нечетное слово заключать в тег span с id=»1″, а четное в тег span с id=»2″, естественно с закрывающими тегами.
    то есть алгоритм таков:
    1) разбили строку на 2 массива (или на один массив)
    2) заключили каждый элемент массива в span со своим id (для четного id=2, для нечетного id=1)
    3) собрали строку обратно (но уже со span’ами) в другом месте документа
    воть. я тормознул как раз на заключении элементов в спан, что поделать… учусь:)
    p.s. в описании метода split, в статье выше, создается массив temp, где четность прямо определяется номером элемента в массиве 0, 1, 2, 3, … поэтому я немного не понял, зачем вы предлагаете такой громоздкий метод.

  14. Stepler / 09.12.2008 в 01:35

    Вам нужно модифицировать скрипт чтобы он вставлял в массив сразу html тэги, я правильно понял?
    Тогда несколько моментов:

    2) заключили каждый элемент массива в span со своим id (для четного id=2, для нечетного id=1)

    Нельзя создавать элементы с одинаковым id, это уникальный идентификатор элемента, он не может повторятся у элементов по определению.
    Так же согласно спецификации, id элемента не может начинаться с цифры, поэтому вместо id, я буду использовать class(для четного class="even-word", для нечетного class="odd-word").
    Объединяя все вышесказанное получаем скрипт: 

    var str = "как строку разбивать по принципу четности слов используя пробел в качестве разделителя";
var arrStr = str.split(' ');
var len = arrStr.length;
var EvenArr = new Array();
var OddArr = new Array();
var SpanTpl = '<span class="%class%">%text%</span>';
var j = 0;

if (len%2 != 0) {
  len--;
  OddArr[len/2] = arrStr[len];
}

for (var i=0; i<len; i=i+2){
  OddArr[j] = SpanTpl.replace('%class%','odd-word').replace('%text%', arrStr[i]);
  EvenArr[j] = SpanTpl.replace('%class%','even-word').replace('%text%', arrStr[i+1]);
  j++;
}

    Теперь в массивах OddArr и EvenArr хранится html код элементов.

    p.s. в описании метода split, в статье выше, создается массив temp, где четность прямо определяется номером элемента в массиве 0, 1, 2, 3, … поэтому я немного не понял, зачем вы предлагаете такой громоздкий метод.

    Этот громоздкий скрипт, из исходного массива arrStr, распределяет четные/нечетные слова по массивам EvenArr и OddArr. Это проще сделать заранее и работать с обработанной информацией.

  15. Octane / 09.12.2008 в 03:00

    Павел, есть способ короче:

    var str = 'word1 word2 word3 word4 word5';
str = str.replace(/\b(\w+)\b/g, function(i) {
    return function() {
        return '<span class="' + (i++ % 2 ? 'even' : 'odd') + '">' + arguments[1] + '</span>';
    };
}(0));
alert(str);

    Или нужно в разные массивы разнести слова?

  16. Павел / 09.12.2008 в 03:21

    спасибо! осталось понять, как собирать строку в документе

  17. Павел / 09.12.2008 в 03:25

    точнее уже понял. спасибо за помощь :)

  18. Павел / 09.12.2008 в 03:41

    Octane, я извиняюсь за флуд, но ваш способ не работает с кириллической строкой.

  19. Stepler / 09.12.2008 в 13:17

    Вариант Octane-а который работает с кириллицой:

    var str = 'слово1 слово2 слово3 слово4 слово5';
str = str.replace(/(\s)?([\d\w\u0410-\u044F\u0401\u0451]+)(\s)?/g, function(i) {
  return function() {
    return arguments[1] + '<span class="' + (i++ % 2 ? 'even' : 'odd') + '">' + arguments[2] + '</span>' + arguments[3];
  };
}(0));
alert(str);
  20. xipi / 22.12.2008 в 08:46

    А как строку 4437.39 перевести в чило? При умножении на 1 выдает NaN.

  21. Stepler / 22.12.2008 в 15:45
    var strVal = "4437.39";
var floatVal = parseFloat(strVal);
alert(floatVal + ' -> ' + typeof floatVal);
  22. En3rgizer / 19.01.2009 в 20:05

    отличная статья, респект автору и переводчику!

  23. Roma / 11.03.2009 в 23:40

    Спасибо статья хорошая.
    но у меня неработает такой код:
    document.write(document.indexOf(‘world’)); Приэтом в документе есть слово «world»
    Мне нужно в документе найти последовательность символов. И с ней работать. Подскажите плиз как это сделать?

  24. mr47 / 29.04.2009 в 00:57

    Отличная статья помогла мне постичь javascripts хоть на начальном уровне :) )) — php форева xD

  25. Ilshat89 / 06.05.2009 в 22:31

    Благодарю автора!!!! =)))))

  26. Ilshat89 / 06.05.2009 в 22:32

    И переводчика тоже!!!! =)))))

  27. elimS / 09.05.2009 в 18:04

    А есть что-то, что заменяет все указаные символы в строке, на желаемые?

  28. elimS / 09.05.2009 в 18:22

    Нашел. надо вот так:

    text_temp = text_temp.replace(/0/g,»1″);

  29. сергей / 11.05.2009 в 20:03

    Статья отличная!!!

    много чего нового для себя,узнал…но проблема с переносом значений осталась,не стал парится, решил ее средством php/

  30. Михаил / 09.06.2009 в 10:54

    Спасибо большое за статью! Нашел что искал!

  31. Мария / 09.06.2009 в 14:31

    Спасибо!

    «много чего нового для себя,узнал…но проблема с переносом значений осталась,не стал парится, решил ее средством php/» — изучайте Аjax.

  32. Plus / 07.07.2009 в 11:12

    Есть ли аналог replace для нерегистрозависимого поиска?

    Как в php str_ireplace

  33. Stepler / 07.07.2009 в 11:53

    В JavaScript имеется набор модификаторов для поиска по шаблонам

    var str1 = "ABBA";
alert(str1.replace(/a/, 'a'));
alert(str1.replace(/a/i, 'a'));
alert(str1.replace(/a/ig, 'a'));

    По умолчанию, весь поиск регистрозависимый, отключает его модификатор i.

    Модификатор g, включает глобальный поиск соответствий в строке, без него после 1-го найденного соответствия скрипт прекращает работу.

  34. Mixala / 17.07.2009 в 11:43

    Статья интересная. Но какая-то слишком обобщенная, без примеров. Я нашел тут ответ на свой вопрос…но уже в комментариях.
    з.ы. наопер отображаются эта форма криво — кнопки с полями имени сползли на текстовое поле — сейчас пишу наугад, ничего не видно. опера 8 — 8ю53

  35. Octane / 17.07.2009 в 15:49

    Mixala, Opera 8.53 давно в прошлом, обновитесь до 9-й или даже бета версии 10-й и будет вам счастье :)

  36. BASSON_XVI / 25.07.2009 в 04:50

    Спасибо помогли! Но статейка все таки маловата в неё бы все из коментов вынести особенно про replace! ^)

  37. Parkman / 18.08.2009 в 13:40

    Почему когда я пишу

    var a=’hello’;
    document.write(a.lenght);

    у меня выдаёт значение undefined

  38. Octane / 18.08.2009 в 16:56

    length

  39. Parkman / 18.08.2009 в 19:16

    спасибо :) ))))))

  40. Parkman / 18.08.2009 в 19:20

    А как можно сделать одновременно цвет текста красный и чтобы он моргал ? Подскажите пожалуйста.

  41. Octane / 18.08.2009 в 19:26

    Parkman, задавайте, пожалуйста, вопросы, не относящиеся к данной статье, на форуме JavaScript.ru.

  42. Parkman / 18.08.2009 в 19:41

    извините

  43. sankovcity / 06.10.2009 в 22:55

    А как можно заменить все одинарные кавычки в тексте двумя одинарными.
    str1.replace(/’/g, «»») — так получается бесконечный цыкл

  44. Ildar / 09.07.2011 в 10:06

    А как сделать аналог пхп фунции str_replace?

  45. Миша / 02.08.2011 в 21:31

    Расскажите про UNICODE строки .

  46. Руслан / 12.10.2011 в 08:34

    Здравствуйте.
    Статья отличная, но не нашел ответ на вопрос:
    как преобразовать строку в переменную?
    Вот например:
    function prinimaem (obj){

    id_1 = obj.id_1; // понимает нормально
    alert («приняли «+id_1);
    // а если так то не понимает
    id_1 = obj.id_+»1″; // не понимает
    alert («приняли «+id_1);
    };

Оставить комментарий

480×60
480×60