วิธีการตัดแต่งสตริงเป็น N chars ใน Javascript?


169

ฉันจะใช้จาวาสคริปต์ได้อย่างไรโดยสร้างฟังก์ชั่นที่จะตัดสตริงที่ส่งผ่านเป็นอาร์กิวเมนต์ไปยังความยาวที่ระบุและส่งผ่านเป็นอาร์กิวเมนต์ ตัวอย่างเช่น:

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

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

ใครมีแนวคิดบ้าง ฉันได้ยินอะไรบางอย่างเกี่ยวกับการใช้สตริงย่อย แต่ไม่ค่อยเข้าใจ


1
"this is" = 7 ตัวอักษรคุณตั้งใจหรือไม่
aziz punjani

ดังที่กล่าวไว้ในคำถามฉันไม่แน่ใจว่าจะใช้ซับสตริงในการทำสิ่งนี้ได้อย่างไร คุณช่วยยกตัวอย่างให้ฉันได้ไหม ฉันจะยอมรับเป็นคำตอบแน่นอนถ้าใช้งานได้) @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 = "นี่คือสตริง"; ความยาว var = 20; var trimmedString = string.length> length? string.substring (0, ความยาว - 3) + "... ": string.substring (0, ความยาว);
จะ

5
โปรดทราบว่า string.substr (เริ่มต้น, ความยาว) ทำงานผิดปกติมันจะกลับมาว่างเปล่าถ้าความยาวมากกว่าความยาวของสตริง string.substring (เริ่มต้นสิ้นสุด) ทำงานตามที่คาดไว้นั่นคือมันจะส่งคืนสตริงจนถึงจุดสิ้นสุดถ้ามีอักขระไม่เพียงพอสำหรับปลายที่กำหนด!
centic

1
string.substrใช้ มันไม่มีพฤติกรรมแปลก ๆ แม้จะมีความคิดเห็นก่อนหน้านี้
Gibolt

.substring(from, to)ใช้เวลาดัชนี .substr (จากความยาว) ไม่เช่นกัน. substr () ใช้เพื่อให้มีความไม่สอดคล้องกันใน IE เมื่ออาร์กิวเมนต์แรกเป็นลบ
Bob Stein

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ตัวอักษรที่จุดนั้นเพียงแค่ใช้
Nick Sweeting

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()เพราะคุณกำลังเขียนทับต้นแบบของวัตถุมาตรฐาน สิ่งนี้อาจทำให้เกิดพฤติกรรมที่ไม่คาดคิดในไลบรารีและเครื่องมืออื่น ๆ ที่คุณอาจใช้
Oleg Berman

1
นั่นคือสิ่งที่ฉันต้องการ
naneri


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 ตัวอย่าง ฉันขอแนะนำให้ใช้ต้นแบบ String กับการบรรทุกเกินพิกัดเพื่อรองรับระบบดั้งเดิม มันทำให้ง่ายต่อการปรับใช้และเปลี่ยนแปลงในภายหลัง


สวัสดี! เป็นการดีที่จะรวมคำอธิบายเกี่ยวกับสิ่งที่เกิดขึ้นกับรหัสของคุณ ระบุว่าโซลูชันของคุณคล้ายกับคำตอบที่ยอมรับได้หรือไม่อาจมีรายละเอียดเล็กน้อยเกี่ยวกับสิ่งที่padEndกำลังทำ
Mattie

วิธีการแก้ปัญหาของฉันสะอาดกว่าและได้มาตรฐานมากกว่าอีกทั้งยังแสดงให้เห็นถึงการใช้งานที่หลากหลาย วิธีการ padEnd () แผ่นรองสตริงปัจจุบันกับสตริงที่กำหนด (ซ้ำถ้าจำเป็น) เพื่อให้สตริงผลถึงความยาวที่กำหนด การเติมจะใช้จากจุดสิ้นสุด (ขวา) ของสตริงปัจจุบัน แหล่งที่มาสำหรับตัวอย่างเชิงโต้ตอบนี้ถูกเก็บไว้ในที่เก็บ GitHub แหล่งที่มา: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ …
Matthew Egan

1
ฉันไม่ได้โต้แย้งคุณภาพของคำตอบของคุณ เพียงแค่ข้อเสนอแนะเกี่ยวกับวิธีทำให้ดีขึ้น คำอธิบายของคุณยอดเยี่ยม - แก้ไขคำตอบแล้วนำไปใส่ไว้ที่นั่น!
Mattie

สวัสดี Matt ฉันชอบคำตอบของคุณ เป็นเรื่องผิดปกติที่คุณกำลังตอบคำถามที่แตกต่างออกไปเล็กน้อย ตอนแรกเขาถามเกี่ยวกับการตัดแต่งสตริงไม่ใช่ความยาวสตริงคงที่ที่ส่งคืน
Jakub Kriz

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
ฉันอยากรู้ว่าทำไมคุณถึงเพิ่มคำตอบนี้ คำถามมีคำตอบที่ยอมรับแล้วและคำตอบที่สมเหตุสมผลอื่น ๆ ซึ่งทั้งหมดนั้นง่ายกว่านี้ หรือ ":-)" ของคุณตั้งใจจะทำให้เรื่องนี้เป็นเรื่องตลกหรือไม่?
Scott Sauyet

โปรดทราบว่าคำตอบที่ยอมรับนั้นเป็นคำตอบที่ได้รับคะแนนสูงสุด ฉันคิดว่าคุณกำลังพยายามแก้ไขปัญหาอื่นที่นี่ (และฉันไม่ได้สังเกตว่าเมื่อแสดงความคิดเห็นก่อนหน้านี้) ไม่ใช่ว่ามันเป็นปัญหาที่ไม่น่าเป็นไปได้ แต่ในท้ายที่สุดมันเกี่ยวข้องกับคำถามที่ถามเพียงเล็กน้อยเท่านั้น ขอแสดงนอกจากนี้ยังมีผลกระทบแปลกที่มีการป้อนข้อมูลที่กำหนดสตริงส่งออกของคุณเป็น23ตัวละครที่ยาวนานกว่า17พารามิเตอร์เริ่มต้นบวกกับตัวละครในคำต่อท้าย4 " ..."ดูเหมือนว่าแปลก
Scott Sauyet

ฉันคิดว่านี่อาจใช้การติดตั้งที่ง่ายขึ้น
Scott Sauyet
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.