Jak przyciąć ciąg do znaków N w JavaScript?


169

Jak mogę, używając Javascript, stworzyć funkcję, która obetnie ciąg przekazany jako argument do określonej długości, również przekazany jako argument. Na przykład:

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

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

Czy ktoś ma pomysły? Słyszałem coś o używaniu podciągu, ale nie do końca rozumiałem.


1
„to jest” = 7 znaków, czy to było zamierzone?
aziz punjani

Jak powiedziano w pytaniu, nie jestem pewien, jak użyć do tego podciągu. Czy mógłbyś podać mi przykład? Oczywiście zaakceptuję odpowiedź, jeśli zadziała;) @Interstellar_Coder oops, literówka!

Odpowiedzi:


346

Dlaczego nie użyć po prostu podłańcucha ... string.substring(0, 7);Pierwszy argument (0) jest punktem wyjścia. Drugi argument (7) to punkt końcowy (wyłączny). Więcej informacji tutaj.

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

Dzięki! Działa świetnie. Oznaczę to jako odpowiedź, gdy tylko upłynie limit czasu!

24
A jeśli chcesz elipsy dla łańcuchów przekraczających maksymalną długość (prawdopodobnie bardziej przydatne przy dłuższym max): var string = "to jest łańcuch"; var length = 20; var trimmedString = string.length> length? string.substring (0, length - 3) + "...": string.substring (0, length);
Will

5
Zwróć uwagę, że string.substr (start, length) zachowuje się dziwnie, zwróci pusty, jeśli length jest większy niż długość ciągu. string.substring (start, end) działa zgodnie z oczekiwaniami, tj. zwróci łańcuch do końca, jeśli nie ma wystarczającej liczby znaków na podany koniec!
centic

1
Użyj string.substr. Nie ma dziwnego zachowania, pomimo poprzedniego komentarza
Gibolt

.substring(from, to)przyjmuje indeksy . .substr (from, length) nie, również .substr () używano do niespójności w IE, gdy pierwszy argument jest ujemny.
Bob Stein

47

Kopiowanie komentarza Willa do odpowiedzi, bo uznałem ją za przydatną:

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

Dzięki Will.

I jsfiddle dla każdego, kogo to obchodzi https://jsfiddle.net/t354gw7e/ :)


1
Nie ma sensu używać string.substring(0, length)w innym przypadku, ponieważ łańcuch na pewno będzie miał <= 20 znaków w tym momencie, po prostu użyj string.
Nick Sweeting

15

Sugeruję użycie rozszerzenia, aby zachować porządek w kodzie. Zauważ, że rozszerzenie prototypu wewnętrznego obiektu może potencjalnie zepsuć biblioteki, które są od nich zależne.

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

I używaj go jak:

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

5
Dlaczego nie? Ponieważ nadpisujesz prototyp standardowego obiektu .trim(). Może to spowodować nieoczekiwane zachowanie w innych bibliotekach i narzędziach, których możesz używać.
Oleg Berman

1
właśnie tego potrzebowałem
naneri


2

Trochę późno ... Musiałem odpowiedzieć. To jest najprostszy sposób.

// 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) + '"');

Krok po kroku. .padEnd - gwarantuje długość ciągu

Metoda padEnd () wypełnia bieżący ciąg danym ciągiem (w razie potrzeby powtórzonym), tak aby otrzymany ciąg osiągnął określoną długość. Wypełnienie jest stosowane od końca (po prawej) bieżącego ciągu. Źródło tego interaktywnego przykład jest przechowywany w repozytorium GitHub ”. źródło: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

.substring - ogranicza potrzebną długość

Jeśli zdecydujesz się dodać wielokropki, dołącz je do wyniku.

Podałem 4 przykłady typowych zastosowań JavaScript. Zdecydowanie polecam używanie prototypu String z funkcją Overloading w celu obsługi starszych wersji. To znacznie ułatwia późniejsze wdrożenie i zmianę.


Witaj! Dobrze jest również dołączyć wyjaśnienie, co się dzieje z Twoim kodem. Biorąc pod uwagę, jak podobne jest twoje rozwiązanie do zaakceptowanej odpowiedzi, być może trochę szczegółów na temat tego, co się padEnddzieje.
Mattie

Moje rozwiązanie jest znacznie czystsze i bardziej ustandaryzowane, a ponadto wykazuje wiele zastosowań. Metoda padEnd () wypełnia bieżący ciąg danym ciągiem (w razie potrzeby powtórzonym), tak aby otrzymany ciąg osiągnął określoną długość. Wypełnienie jest stosowane od końca (po prawej) bieżącego ciągu. Źródło tego interaktywnego przykładu jest przechowywane w repozytorium GitHub. źródło: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Matthew Egan

1
Nie kwestionuję jakości twojej odpowiedzi. Tylko sugestia, jak to ulepszyć. Twoje wyjaśnienie jest świetne - edytuj swoją odpowiedź i umieść ją tam!
Mattie

Cześć Matt, podoba mi się twoja odpowiedź. Szkoda, że ​​odpowiadasz na nieco inne pytanie. Początkowo zapytał o przycięcie sznurka, a nie o zwrócenie stałej długości.
Jakub Kriz

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

Przypadek użycia,

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

trimString(string, 20);

//How to trim a string...

-1

Myślę, że powinieneś użyć tego kodu :-)

    // 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
Ciekaw jestem, dlaczego dodałeś tę odpowiedź. Pytanie ma już zaakceptowaną odpowiedź i kilka innych rozsądnych odpowiedzi, z których wszystkie są prostsze niż to. A może Twój „:-)” miał na celu zażartowanie?
Scott Sauyet

Zwróć uwagę, że zaakceptowana odpowiedź jest również najwyższą oceną. Myślę, że próbujesz tutaj rozwiązać inny problem. (I nie zauważyłem tego, komentując wcześniej). Nie chodzi o to, że jest to mało prawdopodobny problem, ale ostatecznie jest to tylko nieznacznie związane z zadanym pytaniem. Twój ma również dziwny efekt, że przy danym wejściu twój łańcuch wyjściowy ma 23długość znaków, dłuższą niż 17domyślny parametr plus 4znaki w sufiksie " ...". To wydaje się dziwne.
Scott Sauyet

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.