Wie schneide ich einen String in Javascript auf N Zeichen?


169

Wie kann ich mit Javascript eine Funktion erstellen, die als Argument übergebene Zeichenfolge auf eine bestimmte Länge trimmt, die auch als Argument übergeben wird? Beispielsweise:

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

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

Hat jemand Ideen? Ich habe etwas über die Verwendung von Teilzeichenfolgen gehört, aber nicht ganz verstanden.


1
"das ist" = 7 Zeichen, hast du das beabsichtigt?
Aziz Punjani

Wie in der Frage gesagt, bin ich mir nicht sicher, wie ich dazu Teilzeichenfolgen verwenden soll. Könnten Sie mir bitte ein Beispiel geben? Ich akzeptiere natürlich eine Antwort, wenn es funktioniert;) @Interstellar_Coder oops, Tippfehler!

Antworten:


345

Warum nicht einfach Teilzeichenfolge verwenden ... string.substring(0, 7);Das erste Argument (0) ist der Ausgangspunkt. Das zweite Argument (7) ist der Endpunkt (exklusiv). Mehr Infos hier.

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

Vielen Dank! Funktioniert perfekt. Ich werde es als Antwort markieren, sobald das Zeitlimit überschritten ist!

23
Und wenn Sie Ellipsen für Zeichenfolgen wünschen, die die maximale Länge überschreiten (wahrscheinlich hilfreicher für längere maximale Länge): var string = "Dies ist eine Zeichenfolge"; var Länge = 20; var trimmedString = string.length> length? string.substring (0, Länge - 3) + "...": string.substring (0, Länge);
Wird

5
Bitte beachten Sie, dass sich string.substr (Start, Länge) seltsam verhält. Es wird leer zurückgegeben, wenn die Länge größer als die Länge des Strings ist. string.substring (start, end) funktioniert wie erwartet, dh es wird der String bis zum Ende zurückgesetzt, wenn nicht genügend Zeichen für das angegebene Ende vorhanden sind!
Centic

1
Verwenden Sie string.substr. Es hat kein seltsames Verhalten, trotz des vorherigen Kommentars
Gibolt

.substring(from, to)nimmt Indizes . .substr (from, length) hat keine .substr () hatte früher eine Inkonsistenz im IE, wenn das erste Argument negativ ist.
Bob Stein

47

Kopieren von Wills Kommentar in eine Antwort, weil ich ihn nützlich fand:

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

Danke Will.

Und eine jsfiddle für alle, die sich für https://jsfiddle.net/t354gw7e/ interessieren :)


1
Im string.substring(0, length)anderen Fall macht die Verwendung keinen Sinn , da die Zeichenfolge zu diesem Zeitpunkt garantiert <= 20 Zeichen beträgt string. Verwenden Sie einfach .
Nick Sweeting

15

Ich schlage vor, eine Erweiterung für die Code-Ordentlichkeit zu verwenden. Beachten Sie, dass das Erweitern eines internen Objektprototyps möglicherweise zu Bibliotheken führen kann, die von ihnen abhängen.

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

Und benutze es wie:

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

5
Warum nicht? Weil Sie den Prototyp eines Standardobjekts überschreiben .trim(). Dies kann zu unerwartetem Verhalten in anderen Bibliotheken und Tools führen, die Sie möglicherweise verwenden.
Oleg Berman

1
das ist was ich brauchte
naneri


2

Etwas spät ... Ich musste antworten. Dies ist der einfachste Weg.

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

Schritt für Schritt. .padEnd - Garantiert die Länge der Zeichenfolge

"Die padEnd () -Methode füllt die aktuelle Zeichenfolge mit einer bestimmten Zeichenfolge (wird bei Bedarf wiederholt), sodass die resultierende Zeichenfolge eine bestimmte Länge erreicht. Die Auffüllung wird am Ende (rechts) der aktuellen Zeichenfolge angewendet. Die Quelle für diese interaktive Zeichenfolge Beispiel wird in einem GitHub-Repository gespeichert. " Quelle: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

.substring - begrenzt die Länge, die Sie benötigen

Wenn Sie Ellipsen hinzufügen möchten, hängen Sie diese an die Ausgabe an.

Ich habe 4 Beispiele für gängige JavaScript-Verwendungen gegeben. Ich empfehle dringend, den String-Prototyp mit Überladung für Legacy-Unterstützung zu verwenden. Dies erleichtert die spätere Implementierung und Änderung erheblich.


Hallo! Es ist gut, auch eine Erklärung hinzuzufügen, was mit Ihrem Code los ist. Angesichts der Ähnlichkeit Ihrer Lösung mit der akzeptierten Antwort, vielleicht ein kleines Detail darüber, was die Lösung padEndtut.
Mattie

Meine Lösung ist viel sauberer und standardisierter und zeigt mehrere Verwendungen. Die padEnd () -Methode füllt die aktuelle Zeichenfolge mit einer bestimmten Zeichenfolge (wird bei Bedarf wiederholt), sodass die resultierende Zeichenfolge eine bestimmte Länge erreicht. Das Auffüllen wird vom Ende (rechts) der aktuellen Zeichenfolge angewendet. Die Quelle für dieses interaktive Beispiel wird in einem GitHub-Repository gespeichert. Quelle: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Matthew Egan

1
Ich bestreite nicht die Qualität Ihrer Antwort. Nur ein Vorschlag, wie man es besser macht. Ihre Erklärung ist großartig - bearbeiten Sie Ihre Antwort und geben Sie sie dort ein!
Mattie

Hallo Matt, ich mag deine Antwort. Es ist schade, dass Sie auf eine etwas andere Frage antworten. Er fragte ursprünglich nach dem Trimmen einer Saite, nicht nach einer zurückgegebenen festen Saitenlänge.
Jakub Kriz

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

Anwendungsfall,

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

trimString(string, 20);

//How to trim a string...

-1

Ich denke, dass Sie diesen Code verwenden sollten :-)

    // 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
Ich bin gespannt, warum Sie diese Antwort hinzugefügt haben. Die Frage hat bereits eine akzeptierte Antwort und einige andere vernünftige Antworten, die alle einfacher sind. Oder war dein ":-)" beabsichtigt, dies zu einem Witz zu machen?
Scott Sauyet

Beachten Sie, dass die akzeptierte Antwort auch die am höchsten bewertete Antwort ist. Ich denke, Sie versuchen hier ein anderes Problem zu lösen. (Und das hatte ich bei früheren Kommentaren nicht bemerkt.) Es ist nicht so, dass es ein unwahrscheinliches Problem ist, aber am Ende hängt es nur geringfügig mit der gestellten Frage zusammen. Ihre hat auch den seltsamen Effekt, dass Ihre Ausgabezeichenfolge bei der angegebenen Eingabe 23Zeichen lang ist, länger als der 17Standardparameter plus die 4Zeichen im Suffix " ...". Das scheint seltsam.
Scott Sauyet

Ich denke auch, dass dies eine einfachere Implementierung gebrauchen könnte .
Scott Sauyet
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.