Как обрезать строку до N символов в Javascript?


169

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

var string = "this is a string";
var length = 6;
var trimmedString = trimFunction(length, string);

// trimmedString should be:
// "this is"

У кого-нибудь есть идеи? Я что-то слышал об использовании подстроки, но не совсем понял.


1
"это" = 7 символов, вы это хотели?
Азиз Пунджани

Как сказано в вопросе, я не слишком уверен, как использовать подстроку для этого. Не могли бы вы дать мне пример? Я приму это ответ, конечно, если он работает;) @Interstellar_Coder ой, опечатка!

Ответы:


346

Почему бы просто не использовать подстроку ... string.substring(0, 7);Первый аргумент (0) является отправной точкой. Второй аргумент (7) является конечной точкой (исключая). Больше информации здесь.

var string = "this is a string";
var length = 7;
var trimmedString = string.substring(0, length);

Спасибо! Работает отлично. Я отмечу это как ответ, как только время истечет!

24
И если вы хотите, чтобы эллипсы для строк превышали максимальную длину (вероятно, более полезно для более длинных максимумов): var string = "this is string"; длина var = 20; var trimmedString = string.length> length? string.substring (0, длина - 3) + "...": string.substring (0, длина);
Будет

5
Обратите внимание, что string.substr (начало, длина) ведет себя странно, он вернет пустое значение, если длина превышает длину строки. string.substring (start, end) работает должным образом, то есть возвращает строку до конца, если для данного конца недостаточно символов!
Centic

1
Использование string.substr. Это не странное поведение, несмотря на предыдущий комментарий
Gibolt

.substring(from, to)берет индексы . .substr (с, длина) не делает, также .substr () используется , чтобы иметь несоответствие в IE , когда первый аргумент отрицательный.
Боб Стейн

47

Копирование комментария Уилла в ответ, потому что я нашел его полезным:

var string = "this is a string";
var length = 20;
var trimmedString = string.length > length ? 
                    string.substring(0, length - 3) + "..." : 
                    string;

Спасибо, Уилл.

И jsfiddle для всех, кому небезразлично https://jsfiddle.net/t354gw7e/ :)


1
Нет смысла использовать string.substring(0, length)в другом случае, так как в этой точке строка гарантированно будет <= 20 символов, просто используйте string.
Ник Свитинг

15

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

String.prototype.trimEllip = function (length) {
  return this.length > length ? this.substring(0, length) + "..." : this;
}

И используйте это как:

var stringObject= 'this is a verrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyylllooooooooooooonggggggggggggsssssssssssssttttttttttrrrrrrrrriiiiiiiiiiinnnnnnnnnnnnggggggggg';
stringObject.trimEllip(25)

5
Почему нет? Потому что вы перезаписываете прототип стандартного объекта .trim(). Это может вызвать неожиданное поведение в других библиотеках и инструментах, которые вы можете использовать.
Олег Берман

1
это то, что мне нужно
нанери


2

Немного поздно ... Я должен был ответить. Это самый простой способ.

// JavaScript
function fixedSize_JS(value, size) {
  return value.padEnd(size).substring(0, size);
}

// JavaScript (Alt)
var fixedSize_JSAlt = function(value, size) {
  return value.padEnd(size).substring(0, size);
}

// Prototype (preferred)
String.prototype.fixedSize = function(size) {
  return this.padEnd(size).substring(0, size);
}

// Overloaded Prototype
function fixedSize(value, size) {
  return value.fixedSize(size);
}

// usage
console.log('Old school JS -> "' + fixedSize_JS('test (30 characters)', 30) + '"');
console.log('Semi-Old school JS -> "' + fixedSize_JSAlt('test (10 characters)', 10) + '"');
console.log('Prototypes (Preferred) -> "' + 'test (25 characters)'.fixedSize(25) + '"');
console.log('Overloaded Prototype (Legacy support) -> "' + fixedSize('test (15 characters)', 15) + '"');

Шаг за шагом. .padEnd - Гарантирует длину строки

«Метод padEnd () дополняет текущую строку заданной строкой (повторяется, если необходимо), чтобы результирующая строка достигла заданной длины. Заполнение применяется с конца (справа) текущей строки. Источник для этого интерактивного пример хранится в репозитории GitHub. " источник: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

.substring - ограничение на необходимую вам длину

Если вы решили добавить эллипсы, добавьте их к выводу.

Я привел 4 примера общего использования JavaScript. Я настоятельно рекомендую использовать прототип String с Overloading для поддержки предыдущих версий. Это значительно облегчает реализацию и изменение позже.


Здравствуйте! Хорошо также включить некоторые пояснения о том, что происходит с вашим кодом. Учитывая, насколько ваше решение похоже на принятый ответ, возможно, немного подробностей о том, что padEndделает.
Мэтти

Мое решение намного чище и более стандартизировано, а также многократное использование. Метод padEnd () дополняет текущую строку заданной строкой (повторяется при необходимости), чтобы полученная строка достигла заданной длины. Заполнение применяется с конца (справа) текущей строки. Исходный код этого интерактивного примера хранится в репозитории GitHub. источник: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Мэтью Иган,

1
Я не оспариваю качество вашего ответа. Просто предложение о том, как сделать это лучше. Ваше объяснение великолепно - отредактируйте свой ответ и вставьте его туда!
Мэтти

Привет Мэтт, мне нравится твой ответ. Жаль, что вы отвечаете на немного другой вопрос. Первоначально он спрашивал об обрезке строки, а не о возвращении фиксированной длины строки.
Якуб Криз

0
    let trimString = function (string, length) {
      return string.length > length ? 
             string.substring(0, length) + '...' :
             string;
    };

Случай использования,

let string = 'How to trim a string to N chars in Javascript';

trimString(string, 20);

//How to trim a string...

-1

Я думаю, что вы должны использовать этот код :-)

    // sample string
            const param= "Hi you know anybody like pizaa";

         // You can change limit parameter(up to you)
         const checkTitle = (str, limit = 17) => {
      var newTitle = [];
      if (param.length >= limit) {
        param.split(" ").reduce((acc, cur) => {
          if (acc + cur.length <= limit) {
            newTitle.push(cur);
          }
          return acc + cur.length;
        }, 0);
        return `${newTitle.join(" ")} ...`;
      }
      return param;
    };
    console.log(checkTitle(str));

// result : Hi you know anybody ...

1
Мне любопытно, почему вы добавили этот ответ. На вопрос уже есть принятый ответ и несколько других разумных ответов, все из которых проще, чем этот. Или ваш ":-)" намеревался сделать это шуткой?
Скотт Саует

Обратите внимание, что принятый ответ также является самым высоко оцененным ответом. Я думаю, что вы пытаетесь решить другую проблему здесь. (И я не заметил этого, когда комментировал ранее.) Дело не в том, что это маловероятная проблема, но, в конце концов, это лишь незначительно связано с заданным вопросом. У вас также есть странный эффект, что при заданном входном сигнале ваша строка вывода имеет 23длину символов, больше, чем 17параметр по умолчанию плюс 4символы в суффиксе " ...". Это кажется странным.
Скотт Саует

Я также думаю, что это может использовать более простую реализацию .
Скотт Саует
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.