문자열의 마지막 문자에서 JavaScript 잘라 내기 / 슬라이스 / 자르기


1973

문자열 12345.00이 있고을 반환하고 싶습니다 12345.0.

나는 보았지만 trim공백 만 다듬고 slice이것이 어떻게 작동하는지 보지 못하는 것처럼 보입니다 . 어떤 제안?


36
반올림에 관심이 있습니까? 12345.46 = 12345.5 또는 12345.4?
RSolberg

9
접미사가 무엇인지 알거나 밑줄을 기준으로 마지막 단어를 나누고 제거하고 싶습니까?
Cᴏʀʏ

65
Ho ho ho, @RSolberg : 문자열을 반올림 할 수 없습니다 !
Ziggy

50
@Ziggy는 무엇을 말합니까? Math.round('0.5') === 1;)
TWiStErRob

16
@TWiStErRob Oh JavaScript, 어떻게 하시겠습니까? * 악수 머리 *
척 레 엉덩이

답변:


3211

부분 문자열 함수를 사용할 수 있습니다 .

let str = "12345.00";
str = str.substring(0, str.length - 1);
console.log(str);

이것은 받아 들여지는 대답이지만 아래 대화에 따라 조각 구문이 훨씬 명확합니다.

let str = "12345.00";
str = str.slice(0, -1); 
console.log(str);


23
@ Kheu-슬라이스 표기법이 훨씬 깨끗합니다. 이전에 하위 문자열 버전을 사용하고있었습니다. 감사!
Matt Ball

32
내가 틀렸다면 용서하십시오. str.substring의 값을 str에 다시 지정할 필요가 없습니까? 처럼str = str.substring(0, str.length -1);
Doug Molineux

10
slicesubstring방법은 모두 대부분 동일합니다; 를 제외하고는 slice()문자열의 끝과 관련하여 음수 색인을 허용하지만을 제외 substring하고는 out-of-bound오류 가 발생합니다.
Amol M Kulkarni

20
누군가 궁금해하는 경우 substring보다 11 % 빠릅니다 slice. jsperf.com/js-slice-vs-substring-test
BenR

19
하위 문자열은 당신이해야한다고 생각하지 않는 미친 미세 최적화입니다. 가독성을 극대화하십시오. 그런 다음 필요한 경우 매달린 과일을 최적화하십시오.
Alfred

1306

슬라이스 를 사용할 수 있습니다 ! 사용 방법을 알고 있어야합니다. 양수는 시작과 관련이 있고 음수는 끝과 관련이 있습니다.

js>"12345.00".slice(0,-1)
12345.0

75
수용된 솔루션과 비교할 때이 방법은 훨씬 더 우아하며 동적으로 생성 된 문자열에도 사용할 수 있습니다.
Sameer Alibhai

1
나는 substr 함수에 대한 PHP 사고로 지치기 때문에 기억하기 쉽고 쓰기가 쉽습니다.
pathfinder

2
@SameerAlibhai 나는 당신에게 동의하지만 substring동적 문자열에서도 메소드를 사용할 수 없습니까? str.length를 사용하여 동적으로 길이를 얻습니까?
Doug Molineux

첫 번째 인덱스는 포괄적이고 두 번째 인덱스는 포함되어야합니다.
Miscreant

@KevinBeal 메인 브라우저에서 F12를 사용하여 콘솔에 입력하고 모든 페이지에서 작동하며 컨텍스트가 있으며 라이브러리를로드 할 수 있습니다.
TWiStErRob

263

JavaScript 문자열 객체 의 하위 문자열 방법을 사용할 수 있습니다 .

s = s.substring(0, s.length - 4)

문자열에서 마지막 네 문자를 무조건 제거합니다 s.

그러나 마지막 네 문자 를 조건부로 제거하려면 정확히 _bar 다음 과 같은 경우에만 제거하십시오 .

var re = /_bar$/;
s.replace(re, "");

107
slice여기가 더 좋습니다. s.slice(0, -4)
Tim Down

12
또는 s.slice (0,- "_ bar".length) (문자 수를 하드 코딩하지 않으려는 경우 유용)
Mahn

3
그는 또한 지정된 엔딩을 대체하는 데 도움을주기 때문에 이것을 좋아합니다.
마이크 그라프

162

가장 쉬운 방법은 slice문자열 의 방법 을 사용하여 음수 위치를 허용하는 것입니다 (문자열 끝의 오프셋에 해당).

const s = "your string";
const withoutLastFourChars = s.slice(0, -4);

마지막 밑줄 이후 (및 밑줄 포함)를 모두 제거하기 위해보다 일반적인 것이 필요한 경우 다음을 수행 할 수 s있습니다 (최소 한 개의 밑줄을 포함하는 한).

const s = "your_string";
const withoutLastChunk = s.slice(0, s.lastIndexOf("_"));
console.log(withoutLastChunk);


67

귀하의 예와 같은 숫자의 경우 다음을 수행하는 것이 좋습니다 substring.

console.log(parseFloat('12345.00').toFixed(1));

그러나 이것이 실제로 숫자를 반올림한다는 점에 유의하십시오.

console.log(parseFloat('12345.46').toFixed(1));


11
+1 이것은 OP에 필요한 것입니다.자를 문자열이 있다는 잘못된 가정을 잊지 마십시오.
naugtur

2
OP가 문자열에 대해 이야기하는 것은 잘못된 가정이 아닙니다. OP가 반올림 숫자에 대해 이야기하지 않기 때문에 당신은 잘못된 가정입니다.
Fernando

30

JavaScript의 슬라이스 기능 사용 :

let string = 'foo_bar';
string = string.slice(0, -4); // Slice off last four characters here
console.log(string);

이것은 문자열의 끝에서 길이에 상관없이 '_bar'를 제거하는 데 사용될 수 있습니다.


19

정규식은 당신이 찾고있는 것입니다.

let str = "foo_bar";
console.log(str.replace(/_bar$/, ""));


귀하의 솔루션은 효과가 있지만 Alex의 답변은보다 포괄적입니다. 그래서 나는 그를 받아 들일 것입니다. 감사!
Albert

1
이것은 맹목적으로 잘리지 않고 조건부 제거와 관련된 문제를 해결합니다
Aaron


9

어때요?

let myString = "12345.00";
console.log(myString.substring(0, myString.length - 1));


9

정규식을 사용하십시오.

let aStr = "12345.00";
aStr = aStr.replace(/.$/, '');
console.log(aStr);


유니 코드를 인식하지 못하는 것 외에도 줄 바꿈과 일치하지 않습니다.
user4642212

7
  1. (. *), 모든 문자를 여러 번 캡처

console.log("a string".match(/(.*).$/)[1]);

  1. .,이 경우 마지막 문자와 일치

console.log("a string".match(/(.*).$/));

  1. $, 문자열의 끝과 일치

console.log("a string".match(/(.*).{2}$/)[1]);


9
splice ()에도 불구하고 정규 표현식을 사용하는 방법을 찾았 기 때문에 이것을 좋아합니다.
QueueHammer

유니 코드를 인식하지 못하는 것 외에도 줄 바꿈과 일치하지 않습니다.
user4642212


5

다음은 다른 답변에서 보지 못했다고 생각하는 대안입니다.

var strArr = "hello i'm a string".split("");
strArr.pop();
document.write(strArr.join(""));

슬라이스 나 서브 스트링처럼 읽기 어렵거나 단순하지는 않지만 멋진 배열 방법을 사용하여 문자열을 연주 할 수 있으므로 알 가치가 있습니다.


4
debris = string.split("_") //explode string into array of strings indexed by "_"

debris.pop(); //pop last element off the array (which you didn't want)

result = debris.join("_"); //fuse the remainng items together like the sun


3

마지막 문자를 자르는 대신 일반 수레를 반올림하려면 다음을 수행하십시오.

var float1 = 12345.00,
    float2 = 12345.4567,
    float3 = 12345.982;

var MoreMath = {
    /**
     * Rounds a value to the specified number of decimals
     * @param float value The value to be rounded
     * @param int nrDecimals The number of decimals to round value to
     * @return float value rounded to nrDecimals decimals
     */
    round: function (value, nrDecimals) {
        var x = nrDecimals > 0 ? 10 * parseInt(nrDecimals, 10) : 1;
        return Math.round(value * x) / x;
    }
}

MoreMath.round(float1, 1) => 12345.0
MoreMath.round(float2, 1) => 12345.5
MoreMath.round(float3, 1) => 12346.0

편집 : Paolo가 지적 했듯이이 기능이 내장되어있는 것 같습니다. 그 솔루션은 분명히 내 것보다 훨씬 깨끗합니다. parseFloattoFixed를 차례로 사용하십시오.




1

공연

오늘 2020.05.13 MacOs High Sierra v10.13.6에서 Chrome v81.0, Safari v13.1 및 Firefox v76.0에서 선택한 솔루션을 테스트합니다.

결론

  • 그만큼 slice(0,-1)(D)가 빠르거나 짧고 긴 문자열에 대한 빠른 솔루션이며 그것은 빠른 크로스 브라우저 솔루션으로 추천
  • 기반의 솔루션 substring(C) 및substr (E) 은 빠릅니다.
  • 정규식 (A, B) 기반 솔루션은 느리거나 중간 속도입니다
  • 솔루션 B, F 및 G는 긴 문자열에 대해 느리다
  • 해답 F는 짧은 줄에서 가장 느리고 G는 긴 줄에서 가장 느립니다.

여기에 이미지 설명을 입력하십시오

세부

솔루션 A , B , C에 대해 두 가지 테스트를 수행합니다 . D , E ( ext ), F , G (my)에

  • 8 문자 짧은 문자열 (OP 질문에서)-실행할 수 있습니다 여기에서
  • 1M 긴 문자열- 여기에서 실행할 수 있습니다

솔루션은 아래 스 니펫에 표시됩니다

다음은 짧은 문자열 용 Chrome에 대한 예제 결과입니다.

여기에 이미지 설명을 입력하십시오


1

알고 String.prototype.{ split, slice, substr, substring } UTF-16으로 인코딩 된 문자열에서 작동

이전 답변 중 어느 것도 유니 코드를 인식하지 못합니다. 대부분의 최신 JavaScript 엔진에서는 문자열이 UTF-16으로 인코딩되지만 더 높은 유니 코드 코드 포인트에는 서로 게이트 쌍이 필요 하므로 기존의 기존 문자열 메소드는 유니 코드 코드 포인트가 아닌 UTF-16 코드 단위에서 작동합니다.

const string = "ẞ🦊";

console.log(string.slice(0, -1)); // "ẞ\ud83e"
console.log(string.substr(0, string.length - 1)); // "ẞ\ud83e"
console.log(string.substring(0, string.length - 1)); // "ẞ\ud83e"
console.log(string.replace(/.$/, "")); // "ẞ\ud83e"
console.log(string.match(/(.*).$/)[1]); // "ẞ\ud83e"

const utf16Chars = string.split("");

utf16Chars.pop();
console.log(utf16Chars.join("")); // "ẞ\ud83e"

또한 RegExp 답변은 현재 양식의 끝에 줄 바꿈과 일치하지 않습니다.

const string = "Hello, world!\n";

console.log(string.replace(/.$/, "").endsWith("\n")); // true
console.log(string.match(/(.*).$/) === null); // true


문자열 반복자를 사용하여 문자를 반복하십시오.

유니 코드 인식 코드는 문자열의 반복자를 사용합니다. 참조 Array.from...확산 . string[Symbol.iterator]사용할 수 있습니다 (예 : 대신string ) .

JavaScript에서 유니 코드 문자열을 문자로 분할하는 방법 도 참조하십시오 .

예 :

const string = "ẞ🦊";

console.log(Array.from(string).slice(0, -1).join("")); // "ẞ"
console.log([
  ...string
].slice(0, -1).join("")); // "ẞ"

su플래그를 사용하십시오 .RegExp

dotAll또는 s플래그 하게 .일치 줄 바꿈 문자의 unicode또는 u플래그 특정 유니 코드 관련 기능을 사용할 수 있습니다.

예 :

const unicodeString = "ẞ🦊",
  lineBreakString = "Hello, world!\n";

console.log(lineBreakString.replace(/.$/s, "").endsWith("\n")); // false
console.log(lineBreakString.match(/(.*).$/s) === null); // false
console.log(unicodeString.replace(/.$/su, "")); // ẞ
console.log(unicodeString.match(/(.*).$/su)[1]); // ẞ

// Now `split` can be made Unicode-aware:

const unicodeCharacterArray = unicodeString.split(/(?:)/su),
  lineBreakCharacterArray = lineBreakString.split(/(?:)/su);

unicodeCharacterArray.pop();
lineBreakCharacterArray.pop();
console.log(unicodeCharacterArray.join("")); // "ẞ"
console.log(lineBreakCharacterArray.join("").endsWith("\n")); // false


일부 그래 핀 🏳️‍🌈은 하나 이상의 코드 포인트 로 구성되며 , 예 를 들어 시퀀스 🏳(U + 1F3F3), VS16(U + FE0F) , ZWJ(U + 200D) , 🌈(U + 1F308)로 구성됩니다. 여기에서도 Array.from이것을 4 개의 "문자"로 나눌 것입니다. 이것들과 유니 코드 속성을 일치시키는 것은 시퀀스 속성 제안을 이스케이프합니다 .


-1

문자열의 끝 부분에 가까운 것을 제거하려는 경우 (가변 크기 문자열의 경우) slice ()와 substr ()을 결합 할 수 있습니다.

쉼표로 구분 된 앵커 태그 목록과 함께 동적으로 작성된 마크 업이있는 문자열이있었습니다. 문자열은 다음과 같습니다.

var str = "<a>text 1,</a><a>text 2,</a><a>text 2.3,</a><a>text abc,</a>";

마지막 쉼표를 제거하려면 다음을 수행하십시오.

str = str.slice(0, -5) + str.substr(-4);

-3

이 시도:

<script>
    var x="foo_foo_foo_bar";
    for (var i=0; i<=x.length; i++) {
        if (x[i]=="_" && x[i+1]=="b") {
            break;
        }
        else {
            document.write(x[i]);
        }
    }
</script>

http://jsfiddle.net/informativejavascript/F7WTn/87/ 에서 실제 작업 예제를 시도 할 수도 있습니다 .


3
고마워 카말 그러나 위의 답변을 필요에 맞게 표시했습니다. 위의 녹색 확인 표시를 확인하십시오. 그래도 코드를 확인했습니다. :) 이제 내 상황에서는 일반적인 끝 문자 시퀀스 만 알고 있습니다. 문자열 끝에서 확인을 시작하는 것이 좋습니다. "foo_b_bar"와 같은 문자열이 있고 마지막 "_bar"만 꺼내고 싶은 경우 제안이 실패합니다. 그래도 고마워! 2 년 전에 질문을하고 오늘날에도 그에 대한 답변을받는 것은 매우 흥미로운 경험입니다. :)
Albert

-4

@ 제이슨 S :

슬라이스를 사용할 수 있습니다! 사용 방법을 알아야합니다. 양수는 시작과 관련이 있고 음수는 끝과 관련이 있습니다.

js> "12345.00".slice (0, -1) 12345.0

내 graphomany에 대해 죄송하지만 게시물은 'jquery'이전에 태그되었습니다. 따라서 slice () 는 하위 문자열이 아닌 DOM 요소 작업에 대한 jQuery 메서드 이므로 jQuery 내에서 slice ()를 사용할 수 없습니다. 즉, @Jon Erickson 은 정말 완벽한 솔루션을 제안합니다.

그러나 메소드는 간단한 Javascript 내에서 jQuery 함수에서 작동합니다. 의견에 대한 마지막 논의로 인해 jQuery는 자신의 부모가 가장 많이 알려진 ECMAScript보다 JS의 재생 가능한 확장보다 훨씬 더 흔합니다.

여기에는 두 가지 방법이 있습니다.

우리의

string.substring(from,to) 'to'index nulled 경우 나머지 문자열을 반환합니다. 그래서 : string.substring(from) 긍정적 또는 부정적 ...

그리고 substr ()-substring과 'length'의 범위를 제공하는 다른 것들은 양수 일 수 있습니다. string.substr(start,length)

또한 일부 관리자는 마지막 방법 string.substr(start,length)이 MSIE에서 작동하지 않거나 오류와 함께 작동하지 않을 것을 제안합니다 .


3
무슨 소리 야? String.prototype.sliceis a native method
naugtur

당신이 말한 것뿐입니다. 자바 스크립트 네이티브 메소드는 물론 slice()DOM 조작을위한 jQuery 메소드 : jQuery API : .slice () . 그리고 확실히, 그것은 JS Array.slice ()의 다형성 상속과 같이 그려 질 수 있지만 두 가지 다른 방법이므로 구별해야한다고 생각합니다. 이 지식에 대한 근사치 일뿐입니다.
스위프트

12
.slice문자열 인 변수 를 호출 하면 OP가 원하는 것을 수행하게됩니다. "jQuery 내부"인지 여부는 중요하지 않으며 jQuery를 덮어 쓰지 않는 한 어떤 방식 으로든 "간섭"할 수있는 방법이 없습니다 String.prototype. 따라서 모든 자바 스크립트 코드가 작동하지 않을 것입니다. 귀하의 답변은 다른 답변이 좋지 않으며 귀하가 제공 한 주장이 잘못되었다고 말합니다.
naugtur December

1
@naugtur에 동의 할 수 있습니다.이 답변이 잘못되었습니다. 문자열의 슬라이스 방법은 jQuery의 영향을받지 않습니다.
reconbot

1
Naugtur가 만든 요점은 아마도 jQuery 객체로 감싸 진 문자열로 끝날 수 있다고 생각합니다 (예를 들어 멋진 .data조작을 하고이 "문자열"로 끝나는 경우) slice. 당신이 원하는 것을하지 않을 것입니다. 그러나 이것은 실제로 유용한 답변이 아닙니다.
mAAdhaTTah

-8

_bar의 왼쪽에 모든 것을 얻으려면 부분 문자열을 사용하십시오. 그러나 먼저 문자열에 _bar의 instr을 가져와야합니다.

str.substring(3, 7);

3은 시작이고 7은 길이입니다.


1
이것은 "foo_foo_bar"가 아닌 "foo_bar"에서만 작동합니다. 질문은 길이가 있지만 알려진 끝의 문자열에 관한 것입니다.
디자인 : Adrian
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.