如何在Javascript中将字符串修剪为N个字符?


169

我如何使用Javascript编写一个函数,将将作为参数传递的字符串修整为指定的长度(也作为参数传递)。例如:

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

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

有人知道吗?我听说过有关使用子字符串的信息,但并不太了解。


1
“这是” = 7个字符,您打算这样做吗?
aziz punjani 2011年

正如问题中所说,我不太确定如何使用子字符串来做到这一点。你能给我一个例子吗?如果可以的话,我当然会给出答案;)@Interstellar_Coder哎呀,错字!

Answers:


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 a string”; var length = 20; var trimmedString = string.length>长度?string.substring(0,长度-3)+“ ...”:string.substring(0,长度);
2012年

5
请注意string.substr(start,length)的行为很奇怪,如果length大于字符串的长度,它将返回空。string.substring(start,end)可以正常工作,即,如果给定的结尾没有足够的字符,它将返回字符串直到结尾!
centic'2

1
使用string.substr。尽管有先前的评论,它也没有奇怪的行为
Gibolt

.substring(from, to)索引。.substr(from,length)不会。此外,当第一个参数为负数时,.substr()过去在IE中也存在不一致的情况。
鲍勃·斯坦因

47

Will的评论复制到答案中,因为我发现它很有用:

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)在else情况下,使用时没有任何意义,因为在那一刻保证字符串<= 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()。这可能会在您使用的其他库和工具中引起意外行为。
奥列格·伯曼

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个常见JavaScript用法的示例。我强烈建议将String原型与Overloading一起使用以支持旧版。它使以后实现和更改变得更加容易。


你好!最好还包含一些有关代码运行情况的解释。考虑到您的解决方案与已接受的答案有多相似,也许会详细说明padEnd正在做什么。
马蒂

我的解决方案更清洁,更标准化,并且可以显示多种用法。padEnd()方法使用给定的字符串(如果需要,重复)填充当前字符串,以使结果字符串达到给定的长度。从当前字符串的末尾(右侧)开始应用填充。该交互式示例的源存储在GitHub存储库中。来源:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
马修·伊根

1
我不会否认您的回答的质量。只是关于如何使其更好的建议。您的解释很棒-编辑您的答案并将其放在此处!
马蒂

嗨,马特,我喜欢你的回答。您在回答一些不同的问题很可惜。他最初询问的是修剪字符串,而不是返回固定的字符串长度。
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
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.