回答編集履歴

`String#startsWith` の Polyfill 追加。「実装」「結論」節の追加。

2016/03/29 09:32

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -123,6 +123,65 @@
 false
 ```
+# 実装
+「何を選択するか」はコードの設計指針によりますが、私自身は次の事に気をつけています。
+- アルゴリズムに無駄が無い事
+- 汎用性が高い事
+例えば、`String#indexOf` は対象文字列の先頭から検索してHITした時点で `index` 値を返す関数です。その為、検索でマッチしないと最後まで検索し続ける事になります。先頭1文字だけ探せば良いところを最後まで探し続けるのは無駄です。
+`String#indexOf` が候補から外れます。
+汎用性とは今回の要件だけでなく、広範囲の要件を網羅できる機能を指します。
+今回は先頭の1文字だけを検索すればすみますが、先頭の2文字を削除したい場合も対応できる方が汎用性が高いといえます。
+`string[0]`, `String#charAt` は先頭1文字だけが対象なので汎用性が低いといえます。
+```JavaScript
+function removeStartsWith1 (targetString, searchString) {
+  if (targetString.startsWith(searchString)) {
+    targetString = targetString.slice(searchString.length);
+  }
+  return targetString;
+}
+function removeStartsWith2 (targetString, searchString) {
+  return targetString.replace(new RegExp('^' + searchString.replace(/(\W)/g, '\u005C$1'), 'g'), '');
+}
+function removeStartsWith3 (textNode, searchString) {
+  if (textNode.data.startsWith(searchString)) {
+    textNode.deleteData(0, searchString.length);
+  }
+  return textNode;
+}
+console.log(removeStartsWith1('※aaa', '※'));  // "aaa"
+console.log(removeStartsWith1('aaa', '※'));    // "aaa"
+console.log(removeStartsWith2('※aaa', '※'));  // "aaa"
+console.log(removeStartsWith2('aaa', '※'));    // "aaa"
+console.log(removeStartsWith3(document.createTextNode('※aaa'), '※'));  // "aaa"
+console.log(removeStartsWith3(document.createTextNode('aaa'), '※'));    // "aaa"
+```
+`String#startsWith` は IE11- に対応する為に Polyfill が必要なので後述します。
+先頭文字列削除に特化するなら `String#replace` の実装がお手軽だと思います。
+対象がテキストノードなら `CharacterData.prototype.deleteData` でテキストノード自身を操作できるのでお勧めです。
+# String.prototype.startsWith の Polyfill
+`String.prototype.startsWith` は ES6 規定の為、IE11- で使用できませんが、Polyfill を使うことで対応できます。
+- [es6-string-prototype-startswith.js: String.prototype.startsWith の Polyfill (ES6 規定)](https://gist.github.com/think49/908b8d5f08c9945beea7)
+# 結論
+いろいろ書きましたが、個人的には `String#replace` と `CharacterData#deleteData` の二択ですね。
+テキストノードをゴリゴリ操作するなら `CharacterData#deleteData`、文字列操作なら `String#replace` というところでしょうか。
+テキストノードも `data` プロパティから `String#replace` を使用してもいいのですが、画面の再描画コストが `CharacterData#deleteData` の方が低そうな気がします(未検証)。
 # 参考リンク
 - [ECMAScript 5 compatibility table](http://kangax.github.io/compat-table/es5/)
@@ -130,22 +189,10 @@
 - [String.prototype.startsWith() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)
 - [1.1.3.18 String.prototype.startsWith – ECMA-262 6th Edition](http://www.ecma-international.org/ecma-262/6.0/#sec-string.prototype.startswith)
-# 所感
-最近は正規表現エンジンも随分と速くなってきましたが、速度は最適化次第でいくらでも変わるものです。
-個人的には Polyfill を適用して汎用性の高い `String#startWith` を使うか、シンプルな `string[0]` の二択ですね。
-IE8- を考慮しなくて良くなったのは選択肢の幅が増えて嬉しいところです。
 **(更新履歴)**
 - 2016/03/27 11:55 `String#lastIndexOf` のコード追加
 - 2016/03/28 10:21 `String#lastIndexOf` のコードが追加できていなかったのを修正。jsperfが削除されていたので比較検証用コードを作成してjsfiddleにUP
+- 2016/03/29 18:30 `String#startsWith` の Polyfill 追加。「実装」「結論」節の追加。
-**(備考)**
-基本的には速度よりも以下に自分の目的にマッチしているかを重視すべきだと思います。
-polyfill作成は少し遅くなるかもしれません。
-詳しくは3/29深夜までに追記します。
 Re: re97 さん

検証結果の記述が足りてなかったのを修正

2016/03/29 09:32

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -97,22 +97,30 @@
 Google Chrome 49.0.2623.87 m
 ```
-RegExp#test (matched): 10.239ms
+RegExp#test (matched): 6.640ms
 true
-RegExp#test (no match): 7.670ms
+RegExp#test (no match): 3.348ms
 false
-propety access on strings (matched): 4.714ms
+propety access on strings (matched): 4.925ms
 true
-propety access on strings (no match): 1.399ms
+propety access on strings (no match): 1.420ms
 false
-String#charAt (matched): 4.143ms
+String#charAt (matched): 5.177ms
 true
-String#charAt (no match): 1.958ms
+String#charAt (no match): 2.596ms
 false
-String#indexOf (matched): 9.909ms
+String#indexOf (matched): 5.453ms
 true
-String#indexOf (no match): 8.867ms
+String#indexOf (no match): 5.050ms
 false
+String#lastIndexOf (matched): 5.788ms
+true
+String#lastIndexOf (no match): 3.901ms
+false
+String#startsWith (matched): 13.675ms
+true
+String#startsWith (no match): 4.301ms
+false
 ```
 # 参考リンク

検証結果の不要な文字列を削除

2016/03/28 01:29

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -97,22 +97,22 @@
 Google Chrome 49.0.2623.87 m
 ```
-test2.html:129 RegExp#test (matched): 10.239ms
+RegExp#test (matched): 10.239ms
-test2.html:130 true
+true
-test2.html:129 RegExp#test (no match): 7.670ms
+RegExp#test (no match): 7.670ms
-test2.html:130 false
+false
-test2.html:129 propety access on strings (matched): 4.714ms
+propety access on strings (matched): 4.714ms
-test2.html:130 true
+true
-test2.html:129 propety access on strings (no match): 1.399ms
+propety access on strings (no match): 1.399ms
-test2.html:130 false
+false
-test2.html:129 String#charAt (matched): 4.143ms
+String#charAt (matched): 4.143ms
-test2.html:130 true
+true
-test2.html:129 String#charAt (no match): 1.958ms
+String#charAt (no match): 1.958ms
-test2.html:130 false
+false
-test2.html:129 String#indexOf (matched): 9.909ms
+String#indexOf (matched): 9.909ms
-test2.html:130 true
+true
-test2.html:129 String#indexOf (no match): 8.867ms
+String#indexOf (no match): 8.867ms
-test2.html:130 false
+false
 ```
 # 参考リンク

String#lastIndexOf のコードが追加できていなかったのを修正。jsperfが削除されていたので比較検証用コードを作成してjsfiddleにUP

2016/03/28 01:24

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -1,34 +1,129 @@
 比較するなら `RegExp#test` にしないと不公平な気はしますね。
-- [string startwith · jsPerf](http://jsperf.com/string-startwith)
+# 比較検証用コード
-- [ECMAScript 5 compatibility table](http://kangax.github.io/compat-table/es5/)
-- [ECMAScript 6 compatibility table](http://kangax.github.io/compat-table/es6/)
+- [前方一致検索の速度比較 - JSFiddle](https://jsfiddle.net/Ldyjr88a/)
 ```JavaScript
 'use strict';
+function test (target, search) {
+  var i = 50000,
-var array = ['※abc', 'def', 'ghi※'];
+      regExp = new RegExp('^' + search.replace(/(\W)/g, '\u005C$1'));
+  while (i--) {
-for (var i = 0, l = array.length; i < l; ++i) {
+    regExp.test(target);
+  }
-  console.log('regexp', /^※/.test(array[i]));
+  return regExp.test(target);
 }
-for (var i = 0, l = array.length; i < l; ++i) {
+function propertyAccess (target, search) {
+  var i = 50000;
+  while (i--) {
+    target[0] === search;
+  }
-  console.log('propety access on strings', array[i][0] === '※');
+  return target[0] === search;
 }
-for (var i = 0, l = array.length; i < l; ++i) {
+function charAt (target, search) {
+  var i = 50000;
+  while (i--) {
+    target.charAt(0) === search;
+  }
-  console.log('charAt', array[i].charAt(0) === '※');
+  return target.charAt(0) === search;
 }
-for (var i = 0, l = array.length; i < l; ++i) {
+function indexOf (target, search) {
+  var i = 50000;
+  while (i--) {
+    target.indexOf(search) === 0;
+  }
-  console.log('indexOf', array[i].indexOf('※') === 0);
+  return target.indexOf(search) === 0;
 }
-for (var i = 0, l = array.length; i < l; ++i) {
+function lastIndexOf (target, search) {
+  var i = 50000;
+  while (i--) {
+    target.lastIndexOf(search, 0) === 0;
+  }
-  console.log('startsWith', array[i].startsWith('※'));
+  return target.lastIndexOf(search, 0) === 0;
 }
+function startsWith (target, search) {
+  var i = 50000;
+  while (i--) {
+    target.startsWith(search);
+  }
+  return target.startsWith(search);
+}
+function benchmark (fn, name, target, search) {
+  console.time(name);
+  var result = fn(target, search);
+  console.timeEnd(name);
+  console.log(result);
+}
+var matchedString = '※' + Array(50000).join('a'),
+    noMatchString = Array(50001).join('a');
+benchmark(test, 'RegExp#test (matched)', matchedString, '※');
+benchmark(test, 'RegExp#test (no match)', noMatchString, '※');
+benchmark(propertyAccess, 'propety access on strings (matched)', matchedString, '※');
+benchmark(propertyAccess, 'propety access on strings (no match)', noMatchString, '※');
+benchmark(charAt, 'String#charAt (matched)', matchedString, '※');
+benchmark(charAt, 'String#charAt (no match)', noMatchString, '※');
+benchmark(indexOf, 'String#indexOf (matched)', matchedString, '※');
+benchmark(indexOf, 'String#indexOf (no match)', noMatchString, '※');
+benchmark(lastIndexOf, 'String#lastIndexOf (matched)', matchedString, '※');
+benchmark(lastIndexOf, 'String#lastIndexOf (no match)', noMatchString, '※');
+benchmark(startsWith, 'String#startsWith (matched)', matchedString, '※');
+benchmark(startsWith, 'String#startsWith (no match)', noMatchString, '※');
 ```
+# 検証結果
+Google Chrome 49.0.2623.87 m
+```
+test2.html:129 RegExp#test (matched): 10.239ms
+test2.html:130 true
+test2.html:129 RegExp#test (no match): 7.670ms
+test2.html:130 false
+test2.html:129 propety access on strings (matched): 4.714ms
+test2.html:130 true
+test2.html:129 propety access on strings (no match): 1.399ms
+test2.html:130 false
+test2.html:129 String#charAt (matched): 4.143ms
+test2.html:130 true
+test2.html:129 String#charAt (no match): 1.958ms
+test2.html:130 false
+test2.html:129 String#indexOf (matched): 9.909ms
+test2.html:130 true
+test2.html:129 String#indexOf (no match): 8.867ms
+test2.html:130 false
+```
+# 参考リンク
+- [ECMAScript 5 compatibility table](http://kangax.github.io/compat-table/es5/)
+- [ECMAScript 6 compatibility table](http://kangax.github.io/compat-table/es6/)
+- [String.prototype.startsWith() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)
+- [1.1.3.18 String.prototype.startsWith – ECMA-262 6th Edition](http://www.ecma-international.org/ecma-262/6.0/#sec-string.prototype.startswith)
+# 所感
 最近は正規表現エンジンも随分と速くなってきましたが、速度は最適化次第でいくらでも変わるものです。
 個人的には Polyfill を適用して汎用性の高い `String#startWith` を使うか、シンプルな `string[0]` の二択ですね。
 IE8- を考慮しなくて良くなったのは選択肢の幅が増えて嬉しいところです。
@@ -37,10 +132,12 @@
 **(更新履歴)**
 - 2016/03/27 11:55 `String#lastIndexOf` のコード追加
+- 2016/03/28 10:21 `String#lastIndexOf` のコードが追加できていなかったのを修正。jsperfが削除されていたので比較検証用コードを作成してjsfiddleにUP
 **(備考)**
 基本的には速度よりも以下に自分の目的にマッチしているかを重視すべきだと思います。
+polyfill作成は少し遅くなるかもしれません。
-詳しくは3/28までに追記します。
+詳しくは3/29深夜までに追記します。
 Re: re97 さん

String#lastIndexOf のコード追加

2016/03/28 01:21

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -33,4 +33,14 @@
 個人的には Polyfill を適用して汎用性の高い `String#startWith` を使うか、シンプルな `string[0]` の二択ですね。
 IE8- を考慮しなくて良くなったのは選択肢の幅が増えて嬉しいところです。
+**(更新履歴)**
+- 2016/03/27 11:55 `String#lastIndexOf` のコード追加
+**(備考)**
+基本的には速度よりも以下に自分の目的にマッチしているかを重視すべきだと思います。
+詳しくは3/28までに追記します。
 Re: re97 さん