如何在Javascript中将字符串裁剪为N个字符？

Question

我如何使用JavaScript编写一个函数，将传入的字符串按照传入的指定长度进行截取。例如：

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

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

有人有想法吗？我听说过使用子字符串，但还没有完全理解。

- user825286

---

"这是" = 2个汉字，您是有意为之吗？ - aziz punjani

正如问题所述，我不太确定如何使用子字符串来实现这一点。你能给我一个例子吗？当然，如果它有效的话，我会接受它作为答案的 ;) @Interstellar_Coder 哎呀，打错字了！ - user825286

Answer 1

为什么不直接使用substring... string.substring(0, 7);第一个参数（0）是起始点。第二个参数（7）是终止点（不包括在内）。更多信息请参考此处。

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

- Will

---

谢谢！完美地运作。一旦时间限制过去，我会将其标记为答案！ - user825286

如果您希望对超过最大长度的字符串使用省略号（对于更长的最大长度可能更有帮助）：var string = "这是一个字符串"; var length = 20; var trimmedString = string.length > length ? string.substring(0, length - 3) + "..." : string.substring(0, length); - Will

请注意，string.substr(start, length) 的行为很奇怪，如果 length 大于字符串的长度，它将返回空字符串。而 string.substring(start, end) 的表现如预期，即如果给定的 end 超出了字符串长度，则它将返回从 start 到字符串末尾的子串！ - centic

使用 string.substr。它没有任何奇怪的行为，尽管之前的评论。 - Gibolt

.substring(from, to) 接受 索引。而 .substr(from, length) 不接受，此外，当第一个参数为负数时，在 IE 中使用 .substr() 会出现不一致的情况，这在以前是存在的。 - Bob Stein

Answer 2

我将Will在Stack Overflow上的评论复制到了答案中，因为我觉得它很有用：

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

谢谢Will。

如果有人在意，这里有一个jsfiddle链接：https://jsfiddle.net/t354gw7e/ :)

- Jon Lauridsen

---

在else语句中使用string.substring(0, length)没有意义，因为此时字符串保证小于等于20个字符，只需使用string即可。 - Nick Sweeting

为了挤出额外的两个字符，使用省略号字符 …。 - Ollie

Answer 3

我建议使用一个扩展来使代码更整洁。 请注意，扩展内部对象原型可能会影响依赖于它们的库。

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

然后像这样使用：

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

- Zameer Ansari

---

为什么不行？因为你正在覆盖标准对象 .trim() 的原型。这可能会导致其他库和工具的意外行为。 - Oleg Berman

这正是我所需要的。 - naneri

Answer 4

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/substr

来自链接：

string.substr(start[, length])

- kendaleiv

Answer 5

建议使用 String.prototype.slice 方法，而不是 String.prototype.substring 方法（在substring一些情况下，其结果可能与您预期的不同）。

从左到右截取字符串的空格：

const str = "123456789";
result = str.slice(0,5);     // "12345", extracts first 5 characters
result = str.substring(0,5); // "12345"

startIndex > endIndex:

result = str.slice(5,0);     // "", empty string
result = str.substring(5,0); // "12345" , swaps start & end indexes => str.substring(0,5)

从右往左剪裁字符串： （负索引开始）

result = str.slice(-3);                 // "789", extracts last 3 characters
result = str.substring(-3);             // "123456789" , -ve becomes 0 => str.substring(0)
result = str.substring(str.length - 3); // "789"

- SridharKritha

Answer 6

    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...

- MD. ABU TALHA

Answer 7

有点晚了……我必须回复一下。这是最简单的方法。

// 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/zh-CN/docs/Web/JavaScript/Reference/…

.substring - 限制所需长度

如果您选择添加省略号，请将其附加到输出。

我提供了四个常见的 JavaScript 用法示例。强烈建议使用 String 原型与过载来支持旧版本。这样做可以更轻松地实现和更改。

- Matthew Egan

---

你好！在你的代码中加入一些解释是很好的。考虑到你的解决方案与被接受的答案非常相似，也许可以详细说明一下 padEnd 的作用。 - Mattie

我的解决方案更干净、更标准化，而且展示了多种用法。padEnd() 方法使用给定的字符串（如果需要，则重复）填充当前字符串，使得结果字符串达到给定长度。填充从当前字符串的末尾（右侧）应用。此交互式示例的源代码存储在 GitHub 存储库中。来源：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd - Matthew Egan

我并不质疑你答案的质量。只是提供一个建议，让它更好。你的解释很棒 - 编辑你的答案并把它放进去！ - Mattie

嗨，马特，我喜欢你的回答。可惜你回答的是一个略微不同的问题。他最初问的是如何修剪字符串，而不是返回固定长度的字符串。 - Jakub Kriz

Answer 8

解决方案是 CSS

如果您想要显示产品名称，缩短长度，可以使用纯CSS来实现。在我开始使用Tailwind CSS之前，我不知道这一点。即使在JavaScript问题中发布，某些人可能会发现它很有用。

-webkit-line-clamp: 3指定h1标签中应有多少行文本。如果文本过长，将在最后一个文本行的最后一个单词后面显示三个点。

浏览器支持良好，除了IE。

h1 {
max-width: 500px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}

<h1>
Germany, Sachsen-Weimar-Eisenach. Wilhelm, (1641-1662). 1/24 Taler 1655, Weimar, auf den Schloßbau zu Weimar. aaaaaaaa aaaaaaa aaaaaaaaa 
</h1>

- Kretiss

Answer 9

只是另一个建议，去除任何尾随的空白

limitStrLength = (text, max_length) => {
    if(text.length > max_length - 3){
        return text.substring(0, max_length).trimEnd() + "..."
    }
    else{
        return text
    }

- Olfredos6

Answer 10

有几种方法可以实现这个目标

let description = "your test description your test description your test description";
let finalDesc = shortMe(description, length);

function finalDesc(str, length){

// return str.slice(0,length);

// return str.substr(0, length);

// return str.substring(0, length);

}

您也可以修改此函数以获取字符串之间的内容。

- Mitesh vaghela