본문 바로가기

프로그래밍/JavaScript

자바스크립트(JavaScript) 문자열 찾기 안녕하세요. 루미오입니다.JavaScript에서 문자열을 찾아야 할 때 어떤 함수를 사용할까요? 가장 많이 쓰는 함수는 indexOf(), lastIndexOf() 함수가 아닐까 생각합니다. 익숙한 함수입니다. 사실 정규식을 안 쓰면 선택의 여지가 없었습니다. 하지만 ES6부터는 startsWith(), endsWith(), includes() 함수를 제공하기 때문에 용도에 따라 선택할 수 있게 되었습니다. 물론 복잡한 검색은 여전히 정규식을 사용하는 search(), march() 함수를 사용하면 됩니다. 이제 하나씩 알아보겠습니다. 순서 ● indexOf() : 문자열 앞에서부터 특정 문자열 위치 찾기 ● lastIndexOf() : 문자열 뒤에서부터 특정 문자열 위치 찾기 ● startsWith()..
자바스크립트(JavaScript) String.prototype.includes() 폴리필(polyfill) 안녕하세요. 루미오입니다. JavaScript는 특정 문자열의 포함여부를 확인하는 includes() 함수를 ES6부터 제공하고 있습니다. 현재 IE에서는 사용할 수 없습니다. 물론 indexOf() 함수를 사용해서 특정 문자열이 포함되었는지 찾을 수 있지만, includes() 함수를 사용한다면 코드가 더 명확해지겠지요. 오늘은 includes() 함수의 폴리필을 만들어 보겠습니다. 순서 ● String.prototype.includes() 폴리필(polyfill) ● String.prototype.includes() 사용법 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. String.prototype.includes() 폴리필 if(!String..
자바스크립트(JavaScript) String.prototype.endsWith() 폴리필(polyfill) 안녕하세요. 루미오입니다. JavaScript는 특정 문자열로 끝나는지 확인하는 endsWith() 함수를 ES6부터 제공하고 있습니다. 현재 IE에서는 사용할 수 없습니다. 물론 lastIndexOf() 함수를 사용해서 특정 문자열로 끝나는지 찾을 수 있지만, endsWith() 함수를 사용하면 코드의 가독성이 좋아지겠지요. 오늘은 ennsWith() 함수의 폴리필을 만들어 보겠습니다. 순서 ● String.prototype.endsWith() 폴리필(polyfill) ● String.prototype.endsWith() 사용법 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. String.prototype.endsWith() 폴리필 /* Strin..
자바스크립트(JavaScript) String.prototype.startsWith() 폴리필(polyfill) 안녕하세요. 루미오입니다.JavaScript는 특정 문자열로 시작하는지 확인하는 startsWith() 함수를 ES6부터 제공하고 있습니다. 현재 IE에서는 사용할 수 없습니다. 물론 indexOf() 함수를 사용해서 특정 문자열로 시작하는지 찾을 수 있지만, startsWith() 함수를 사용하면 코드가 더 명확해지겠지요. 오늘은 startsWith() 함수의 폴리필을 만들어 보겠습니다. 순서 ● String.prototype.startsWith() 폴리필(polyfill) ● String.prototype.startsWith() 사용법 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. String.prototype.startsWith() 폴리필 /..
자바스크립트(JavaScript) String.prototype.trimEnd String.prototype.trimRight 폴리필(polyfill) 안녕하세요. 루미오입니다. 순서 ● trimtrimEnd(), trimRight() 폴리필(polyfill) ● trimtrimEnd(), trimRight() 사용법 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. JavaScript는 문자열의 뒤의 공백을 제거하는 trimEnd(), trimRight() 함수를 제공합니다. trimRight()는 trimEnd()의 alias입니다. 하지만 IE에서 전혀 지원하지 않고 Chrome 66 이상 Firefox 61 이상에서만 지원합니다. 그렇기 때문에 호환성을 위해서 동일한 기능의 폴리필을 적용해야 합니다. trimEnd(), trimRight() 폴리필(polyfill) if(!String.prot..
자바스크립트(JavaScript) String.prototype.trimStart String.prototype.trimLeft 폴리필(polyfill) 안녕하세요. 루미오입니다. 순서 ● trimStart(), trimLeft() 폴리필(polyfill) ● trimStart(), trimLeft() 사용법 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. JavaScript는 문자열의 앞의 공백을 제거하는 trimStart(), trimleft() 함수를 제공합니다. trimleft()는 trimStart()의 alias입니다. 하지만 IE에서 전혀 지원하지 않고 Chrome 66 이상 Firefox 61 이상에서만 지원합니다. 그렇기 때문에 호환성을 위해서 동일한 기능의 폴리필을 적용해야 합니다. trimStart(), trimLeft() 폴리필(polyfill) if(!String.prototy..
자바스크립트(JavaScript) String.prototype.trim 폴리필(polyfill) 안녕하세요. 루미오입니다. 순서 ● String.prototype.trim() 폴리필(polyfill) ● String.prototype.trim() 사용법 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. JavaScript는 문자열의 앞, 뒤의 공백을 제거하는 trim() 함수를 제공합니다. 하지만 IE 9 이상에서만 지원하기 때문에 호환성을 위해서 동일한 기능의 폴리필을 적용해야 합니다. String.prototype.trim() 폴리필(polyfill) if(!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g,''); }; }..
자바스크립트(JavaScript) 배열(Array)의 추가 삭제 안녕하세요. 루미오입니다. JavaScript의 Array에 앞과 뒤에 요소를 추가하거나 삭제하는 방법(shift, unshift, push, pop ), 특정 요소를 중간에 추가하거나 삭제하는 방법(splice)을 알아보겠습니다. 순서 ● Array 앞, 뒤에 추가 삭제 (shift, unshift, push, pop) ● Array 특정 요소 추가 삭제 (splice) ● Array 특정 요소 찾기 (indexOf, lastIndexOf) ● Array 특정 요소 찾아서 바꾸기 (indexOf, splice) ● 전체 Source Code & 바로 Test [jsfiddle] 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. Array 앞, 뒤에 ..
자바스크립트(JavaScript) Array.prototype.indexOf, Array.prototype.lastIndexOf 폴리필(polyfill) 안녕하세요. 루미오입니다. JavaScript Array 함수 중에 indexOf()와 lastIndexOf()는 IE 9 이상에서만 지원합니다. IE 8 이하에서 사용하기 위해서는 폴리필(polyfill)을 적용해야 합니다. 오늘은 indexOf()와 lastIndexOf()의 폴리필(polyfill)을 소개하겠습니다. 순서 ● Array.prototype.indexOf 폴리필(polyfill) ● Array.prototype.lastIndexOf 폴리필(polyfill) 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. Array.prototype.indexOf 폴리필(polyfill) [Array.prototype.indexOf 폴리필] /* A..
자바스크립트(JavaScript), 제이쿼리(jQuery) 페이지 이동(redirect) 안녕하세요. 루미오입니다. JavaScript와 jQuery에서 페이지 이동 방법을 알아보겠습니다. 순서 ● JavaScript의 페이지 이동 ● jQuery의 페이지 이동 ● Test Source Code JavaScript의 페이지 이동 /* assign 방식 */ window.location = "https://loomio.kr"; window.location.href = "https://loomio.kr";// window.location 동일함. window.location.assign("https://loomio.kr");// window.location 동일함. /* replace 방식*/ window.location.replace("https://loomio.kr"); assign방식(2,..

티스토리툴바