-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy pathstrings.html
More file actions
319 lines (240 loc) · 106 KB
/
strings.html
File metadata and controls
319 lines (240 loc) · 106 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>JavsScript - Strings</title>
<meta name="generator" content="VuePress 1.8.2">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="description" content="Basic Info and String Concatenation, Reverse String, Comparing Strings Lexicographically, Access character at index in string, Escaping quotes, Trim whitespace, Splitting a string into an array, Strings are unicode, Detecting a string, Word Counter, Substrings with slice, String Find and Replace Functions, String Representations of Numbers, Character code, String to Upper Case, String to Lower Case, Find the index of a substring inside a string, Repeat a String">
<meta property="og:site_name" content="DevTut">
<meta property="og:title" content="JavsScript - Strings">
<meta property="og:description" content="Basic Info and String Concatenation, Reverse String, Comparing Strings Lexicographically, Access character at index in string, Escaping quotes, Trim whitespace, Splitting a string into an array, Strings are unicode, Detecting a string, Word Counter, Substrings with slice, String Find and Replace Functions, String Representations of Numbers, Character code, String to Upper Case, String to Lower Case, Find the index of a substring inside a string, Repeat a String">
<meta property="og:type" content="article">
<meta property="og:url" content="/javascript/strings.html">
<meta property="og:image" content="/logo.png">
<meta name="twitter:title" content="JavsScript - Strings">
<meta name="twitter:description" content="Basic Info and String Concatenation, Reverse String, Comparing Strings Lexicographically, Access character at index in string, Escaping quotes, Trim whitespace, Splitting a string into an array, Strings are unicode, Detecting a string, Word Counter, Substrings with slice, String Find and Replace Functions, String Representations of Numbers, Character code, String to Upper Case, String to Lower Case, Find the index of a substring inside a string, Repeat a String">
<meta name="twitter:url" content="/javascript/strings.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/logo.png">
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="google-site-verification" content="76_rKXgwMVIjd-axJC_1zPV9OS4mEjvtgjYOWVkAdnQ">
<link rel="preload" href="/assets/css/0.styles.60619e34.css" as="style"><link rel="preload" href="/assets/js/app.1779e102.js" as="script"><link rel="preload" href="/assets/js/3.2cfa8016.js" as="script"><link rel="preload" href="/assets/js/1787.8dffd925.js" as="script">
<link rel="stylesheet" href="/assets/css/0.styles.60619e34.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">DevTut</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>JavaScript</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/javascript/" aria-current="page" class="sidebar-link">Disclaimer</a></li><li><a href="/javascript/getting-started-with-javascript.html" class="sidebar-link">Getting started with JavaScript</a></li><li><a href="/javascript/javascript-variables.html" class="sidebar-link">JavaScript Variables</a></li><li><a href="/javascript/built-in-constants.html" class="sidebar-link">Built-in Constants</a></li><li><a href="/javascript/comments.html" class="sidebar-link">Comments</a></li><li><a href="/javascript/console.html" class="sidebar-link">Console</a></li><li><a href="/javascript/datatypes-in-javascript.html" class="sidebar-link">Datatypes in Javascript</a></li><li><a href="/javascript/strings.html" aria-current="page" class="active sidebar-link">Strings</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/javascript/strings.html#basic-info-and-string-concatenation" class="sidebar-link">Basic Info and String Concatenation</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#reverse-string" class="sidebar-link">Reverse String</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#comparing-strings-lexicographically" class="sidebar-link">Comparing Strings Lexicographically</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#access-character-at-index-in-string" class="sidebar-link">Access character at index in string</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#escaping-quotes" class="sidebar-link">Escaping quotes</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#trim-whitespace" class="sidebar-link">Trim whitespace</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#splitting-a-string-into-an-array" class="sidebar-link">Splitting a string into an array</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#strings-are-unicode" class="sidebar-link">Strings are unicode</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#detecting-a-string" class="sidebar-link">Detecting a string</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#word-counter" class="sidebar-link">Word Counter</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#substrings-with-slice" class="sidebar-link">Substrings with slice</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#string-find-and-replace-functions" class="sidebar-link">String Find and Replace Functions</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#string-representations-of-numbers" class="sidebar-link">String Representations of Numbers</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#character-code" class="sidebar-link">Character code</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#string-to-upper-case" class="sidebar-link">String to Upper Case</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#string-to-lower-case" class="sidebar-link">String to Lower Case</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#find-the-index-of-a-substring-inside-a-string" class="sidebar-link">Find the index of a substring inside a string</a></li><li class="sidebar-sub-header"><a href="/javascript/strings.html#repeat-a-string" class="sidebar-link">Repeat a String</a></li></ul></li><li><a href="/javascript/date.html" class="sidebar-link">Date</a></li><li><a href="/javascript/date-comparison.html" class="sidebar-link">Date Comparison</a></li><li><a href="/javascript/comparison-operations.html" class="sidebar-link">Comparison Operations</a></li><li><a href="/javascript/conditions.html" class="sidebar-link">Conditions</a></li><li><a href="/javascript/arrays.html" class="sidebar-link">Arrays</a></li><li><a href="/javascript/objects.html" class="sidebar-link">Objects</a></li><li><a href="/javascript/arithmetic-math.html" class="sidebar-link">Arithmetic (Math)</a></li><li><a href="/javascript/bitwise-operators.html" class="sidebar-link">Bitwise operators</a></li><li><a href="/javascript/constructor-functions.html" class="sidebar-link">Constructor functions</a></li><li><a href="/javascript/declarations-and-assignments.html" class="sidebar-link">Declarations and Assignments</a></li><li><a href="/javascript/loops.html" class="sidebar-link">Loops</a></li><li><a href="/javascript/functions.html" class="sidebar-link">Functions</a></li><li><a href="/javascript/functional-javascript.html" class="sidebar-link">Functional JavaScript</a></li><li><a href="/javascript/prototypes-objects.html" class="sidebar-link">Prototypes, objects</a></li><li><a href="/javascript/classes.html" class="sidebar-link">Classes</a></li><li><a href="/javascript/namespacing.html" class="sidebar-link">Namespacing</a></li><li><a href="/javascript/context-this.html" class="sidebar-link">Context (this)</a></li><li><a href="/javascript/setters-and-getters.html" class="sidebar-link">Setters and Getters</a></li><li><a href="/javascript/events.html" class="sidebar-link">Events</a></li><li><a href="/javascript/inheritance.html" class="sidebar-link">Inheritance</a></li><li><a href="/javascript/method-chaining.html" class="sidebar-link">Method Chaining</a></li><li><a href="/javascript/callbacks.html" class="sidebar-link">Callbacks</a></li><li><a href="/javascript/intervals-and-timeouts.html" class="sidebar-link">Intervals and Timeouts</a></li><li><a href="/javascript/regular-expressions.html" class="sidebar-link">Regular expressions</a></li><li><a href="/javascript/cookies.html" class="sidebar-link">Cookies</a></li><li><a href="/javascript/web-storage.html" class="sidebar-link">Web Storage</a></li><li><a href="/javascript/data-attributes.html" class="sidebar-link">Data attributes</a></li><li><a href="/javascript/json.html" class="sidebar-link">JSON</a></li><li><a href="/javascript/ajax.html" class="sidebar-link">AJAX</a></li><li><a href="/javascript/enumerations.html" class="sidebar-link">Enumerations</a></li><li><a href="/javascript/map.html" class="sidebar-link">Map</a></li><li><a href="/javascript/timestamps.html" class="sidebar-link">Timestamps</a></li><li><a href="/javascript/unary-operators.html" class="sidebar-link">Unary Operators</a></li><li><a href="/javascript/generators.html" class="sidebar-link">Generators</a></li><li><a href="/javascript/promises.html" class="sidebar-link">Promises</a></li><li><a href="/javascript/set.html" class="sidebar-link">Set</a></li><li><a href="/javascript/modals-prompts.html" class="sidebar-link">Modals - Prompts</a></li><li><a href="/javascript/execcommand-and-contenteditable.html" class="sidebar-link">execCommand and contenteditable</a></li><li><a href="/javascript/history.html" class="sidebar-link">History</a></li><li><a href="/javascript/navigator-object.html" class="sidebar-link">Navigator Object</a></li><li><a href="/javascript/bom-browser-object-model.html" class="sidebar-link">BOM (Browser Object Model)</a></li><li><a href="/javascript/the-event-loop.html" class="sidebar-link">The Event Loop</a></li><li><a href="/javascript/strict-mode.html" class="sidebar-link">Strict mode</a></li><li><a href="/javascript/custom-elements.html" class="sidebar-link">Custom Elements</a></li><li><a href="/javascript/data-manipulation.html" class="sidebar-link">Data Manipulation</a></li><li><a href="/javascript/binary-data.html" class="sidebar-link">Binary Data</a></li><li><a href="/javascript/template-literals.html" class="sidebar-link">Template Literals</a></li><li><a href="/javascript/fetch.html" class="sidebar-link">Fetch</a></li><li><a href="/javascript/scope.html" class="sidebar-link">Scope</a></li><li><a href="/javascript/modules.html" class="sidebar-link">Modules</a></li><li><a href="/javascript/screen.html" class="sidebar-link">Screen</a></li><li><a href="/javascript/variable-coercion-conversion.html" class="sidebar-link">Variable coercion/conversion</a></li><li><a href="/javascript/destructuring-assignment.html" class="sidebar-link">Destructuring assignment</a></li><li><a href="/javascript/websockets.html" class="sidebar-link">WebSockets</a></li><li><a href="/javascript/arrow-functions.html" class="sidebar-link">Arrow Functions</a></li><li><a href="/javascript/workers.html" class="sidebar-link">Workers</a></li><li><a href="/javascript/requestanimationframe.html" class="sidebar-link">requestAnimationFrame</a></li><li><a href="/javascript/creational-design-patterns.html" class="sidebar-link">Creational Design Patterns</a></li><li><a href="/javascript/detecting-browser.html" class="sidebar-link">Detecting browser</a></li><li><a href="/javascript/symbols.html" class="sidebar-link">Symbols</a></li><li><a href="/javascript/transpiling.html" class="sidebar-link">Transpiling</a></li><li><a href="/javascript/automatic-semicolon-insertion-asi.html" class="sidebar-link">Automatic Semicolon Insertion - ASI</a></li><li><a href="/javascript/localization.html" class="sidebar-link">Localization</a></li><li><a href="/javascript/geolocation.html" class="sidebar-link">Geolocation</a></li><li><a href="/javascript/indexeddb.html" class="sidebar-link">IndexedDB</a></li><li><a href="/javascript/modularization-techniques.html" class="sidebar-link">Modularization Techniques</a></li><li><a href="/javascript/proxy.html" class="sidebar-link">Proxy</a></li><li><a href="/javascript/postmessage-and-messageevent.html" class="sidebar-link">.postMessage() and MessageEvent</a></li><li><a href="/javascript/weakmap.html" class="sidebar-link">WeakMap</a></li><li><a href="/javascript/weakset.html" class="sidebar-link">WeakSet</a></li><li><a href="/javascript/escape-sequences.html" class="sidebar-link">Escape Sequences</a></li><li><a href="/javascript/behavioral-design-patterns.html" class="sidebar-link">Behavioral Design Patterns</a></li><li><a href="/javascript/server-sent-events.html" class="sidebar-link">Server-sent events</a></li><li><a href="/javascript/async-functions-async-await.html" class="sidebar-link">Async functions (async/await)</a></li><li><a href="/javascript/async-iterators.html" class="sidebar-link">Async Iterators</a></li><li><a href="/javascript/how-to-make-iterator-usable-inside-async-callback-function.html" class="sidebar-link">How to make iterator usable inside async callback function</a></li><li><a href="/javascript/tail-call-optimization.html" class="sidebar-link">Tail Call Optimization</a></li><li><a href="/javascript/bitwise-operators-real-world-examples-snippets.html" class="sidebar-link">Bitwise Operators - Real World Examples (snippets)</a></li><li><a href="/javascript/tilde.html" class="sidebar-link">Tilde ~</a></li><li><a href="/javascript/using-javascript-to-get-set-css-custom-variables.html" class="sidebar-link">Using javascript to get/set CSS custom variables</a></li><li><a href="/javascript/selection-api.html" class="sidebar-link">Selection API</a></li><li><a href="/javascript/file-api-blobs-and-filereaders.html" class="sidebar-link">File API, Blobs and FileReaders</a></li><li><a href="/javascript/notifications-api.html" class="sidebar-link">Notifications API</a></li><li><a href="/javascript/vibration-api.html" class="sidebar-link">Vibration API</a></li><li><a href="/javascript/battery-status-api.html" class="sidebar-link">Battery Status API</a></li><li><a href="/javascript/fluent-api.html" class="sidebar-link">Fluent API</a></li><li><a href="/javascript/web-cryptography-api.html" class="sidebar-link">Web Cryptography API</a></li><li><a href="/javascript/security-issues.html" class="sidebar-link">Security issues</a></li><li><a href="/javascript/same-origin-policy-cross-origin-communication.html" class="sidebar-link">Same Origin Policy & Cross-Origin Communication</a></li><li><a href="/javascript/error-handling.html" class="sidebar-link">Error Handling</a></li><li><a href="/javascript/global-error-handling-in-browsers.html" class="sidebar-link">Global error handling in browsers</a></li><li><a href="/javascript/debugging.html" class="sidebar-link">Debugging</a></li><li><a href="/javascript/unit-testing-javascript.html" class="sidebar-link">Unit Testing Javascript</a></li><li><a href="/javascript/evaluating-javascript.html" class="sidebar-link">Evaluating JavaScript</a></li><li><a href="/javascript/linters-ensuring-code-quality.html" class="sidebar-link">Linters - Ensuring code quality</a></li><li><a href="/javascript/anti-patterns.html" class="sidebar-link">Anti-patterns</a></li><li><a href="/javascript/performance-tips.html" class="sidebar-link">Performance Tips</a></li><li><a href="/javascript/memory-efficiency.html" class="sidebar-link">Memory efficiency</a></li><li><a href="/javascript/reserved-keywords.html" class="sidebar-link">Reserved Keywords</a></li><li><a href="/javascript/contributors.html" class="sidebar-link">The Contributors</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="strings"><a href="#strings" class="header-anchor">#</a> Strings</h1> <h2 id="basic-info-and-string-concatenation"><a href="#basic-info-and-string-concatenation" class="header-anchor">#</a> Basic Info and String Concatenation</h2> <p>Strings in JavaScript can be enclosed in Single quotes <code>'hello'</code>, Double quotes <code>"Hello"</code> and (from ES2015, ES6) in Template Literals (<strong>backticks</strong>) <code>hello</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> hello <span class="token operator">=</span> <span class="token string">"Hello"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> world <span class="token operator">=</span> <span class="token string">'world'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> helloW <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello World</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token comment">// ES2015 / ES6</span>
</code></pre></div><p>Strings can be created from other types using the <code>String()</code> function.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> intString <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span><span class="token number">32</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "32"</span>
<span class="token keyword">var</span> booleanString <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "true"</span>
<span class="token keyword">var</span> nullString <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "null" </span>
</code></pre></div><p>Or, <code>toString()</code> can be used to convert Numbers, Booleans or Objects to Strings.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> intString <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token number">5232</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "5232"</span>
<span class="token keyword">var</span> booleanString <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "false"</span>
<span class="token keyword">var</span> objString <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "[object Object]"</span>
</code></pre></div><p>Strings also can be created by using <code>String.fromCharCode</code> method.</p> <div class="language-js extra-class"><pre class="language-js"><code>String<span class="token punctuation">.</span><span class="token function">fromCharCode</span><span class="token punctuation">(</span><span class="token number">104</span><span class="token punctuation">,</span><span class="token number">101</span><span class="token punctuation">,</span><span class="token number">108</span><span class="token punctuation">,</span><span class="token number">108</span><span class="token punctuation">,</span><span class="token number">111</span><span class="token punctuation">)</span> <span class="token comment">//"hello"</span>
</code></pre></div><p>Creating a String object using <code>new</code> keyword is allowed, but is not recommended as it behaves like Objects unlike primitive strings.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> objectString <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">String</span><span class="token punctuation">(</span><span class="token string">"Yes, I am a String object"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">typeof</span> objectString<span class="token punctuation">;</span><span class="token comment">//"object"</span>
<span class="token keyword">typeof</span> objectString<span class="token punctuation">.</span><span class="token function">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//"string"</span>
</code></pre></div><h3 id="concatenating-strings"><a href="#concatenating-strings" class="header-anchor">#</a> Concatenating Strings</h3> <p>String concatenation can be done with the <code>+</code> concatenation operator, or with the built-in <code>concat()</code> method on the String object prototype.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token string">"Foo"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> bar <span class="token operator">=</span> <span class="token string">"Bar"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo <span class="token operator">+</span> bar<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => "FooBar"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> bar<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => "Foo Bar"</span>
foo<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>bar<span class="token punctuation">)</span> <span class="token comment">// => "FooBar"</span>
<span class="token string">"a"</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token string">"b"</span><span class="token punctuation">,</span> <span class="token string">" "</span><span class="token punctuation">,</span> <span class="token string">"d"</span><span class="token punctuation">)</span> <span class="token comment">// => "ab d"</span>
</code></pre></div><p>Strings can be concatenated with non-string variables but will type-convert the non-string variables into strings.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> string <span class="token operator">=</span> <span class="token string">"string"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> number <span class="token operator">=</span> <span class="token number">32</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> boolean <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>string <span class="token operator">+</span> number <span class="token operator">+</span> boolean<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "string32true"</span>
</code></pre></div><h3 id="string-templates"><a href="#string-templates" class="header-anchor">#</a> String Templates</h3> <p>Strings can be created using template literals (<strong>backticks</strong>) <code>hello</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> greeting <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</code></pre></div><p>With template literals, you can do string interpolation using <code>${variable}</code> inside template literals:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> place <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">World</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token keyword">var</span> greet <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>place<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</span><span class="token template-punctuation string">`</span></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>greet<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "Hello World!"</span>
</code></pre></div><p>You can use String.raw to get backslashes to be in the string without modification.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">a\\b</span><span class="token template-punctuation string">`</span></span> <span class="token comment">// = a\b</span>
String<span class="token punctuation">.</span>raw<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">a\\b</span><span class="token template-punctuation string">`</span></span> <span class="token comment">// = a\\b</span>
</code></pre></div><h2 id="reverse-string"><a href="#reverse-string" class="header-anchor">#</a> Reverse String</h2> <p>The most "popular" way of reversing a string in JavaScript is the following code fragment, which is quite common:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">reverseString</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">reverseString</span><span class="token punctuation">(</span><span class="token string">'string'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "gnirts"</span>
</code></pre></div><p>However, this will work only so long as the string being reversed does not contain surrogate pairs. Astral symbols, i.e. characters outside of the basic multilingual plane, may be represented by two code units, and will lead this naive technique to produce wrong results. Moreover, characters with combining marks (e.g. diaeresis) will appear on the logical "next" character instead of the original one it was combined with.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string">'𝌆■.'</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//fails</span>
</code></pre></div><p>While the method will work fine for most languages, a truly accurate, encoding respecting algorithm for string reversal is slightly more involved. One such implementation is a tiny library called <a href="https://github.com/mathiasbynens/esrever" target="_blank" rel="noopener noreferrer">Esrever<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, which uses regular expressions for matching combining marks and surrogate pairs in order to perform the reversing perfectly.</p> <h3 id="explanation"><a href="#explanation" class="header-anchor">#</a> Explanation</h3> <table><thead><tr><th>Section</th> <th>Explanation</th> <th>Result</th></tr></thead> <tbody><tr><td><code>str</code></td> <td>The input string</td> <td><code>"string"</code></td></tr> <tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split" target="_blank" rel="noopener noreferrer"><code>String.prototype.split( deliminator )</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>Splits string <code>str</code> into an array. The parameter <code>""</code> means to split between each character.</td> <td><code>["s","t","r","i","n","g"]</code></td></tr> <tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse" target="_blank" rel="noopener noreferrer"><code>Array.prototype.reverse()</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>Returns the array from the split string with its elements in reverse order.</td> <td><code>["g","n","i","r","t","s"]</code></td></tr> <tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join" target="_blank" rel="noopener noreferrer"><code>Array.prototype.join( deliminator )</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>Joins the elements in the array together into a string. The <code>""</code> parameter means an empty deliminator (i.e., the elements of the array are put right next to each other).</td> <td><code>"gnirts"</code></td></tr></tbody></table> <p><strong>Using spread operator</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">reverseString</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token function">String</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">reverseString</span><span class="token punctuation">(</span><span class="token string">'stackoverflow'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "wolfrevokcats"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">reverseString</span><span class="token punctuation">(</span><span class="token number">1337</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "7331"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">reverseString</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "3,2,1"</span>
</code></pre></div><p><strong>Custom <code>reverse()</code> function</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">reverse</span><span class="token punctuation">(</span><span class="token parameter">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> strRev <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> string<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
strRev <span class="token operator">+=</span> string<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> strRev<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">reverse</span><span class="token punctuation">(</span><span class="token string">"zebra"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "arbez"</span>
</code></pre></div><h2 id="comparing-strings-lexicographically"><a href="#comparing-strings-lexicographically" class="header-anchor">#</a> Comparing Strings Lexicographically</h2> <p>To compare strings alphabetically, use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare" target="_blank" rel="noopener noreferrer"><code>localeCompare()</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. This returns a negative value if the reference string is lexicographically (alphabetically) before the compared string (the parameter), a positive value if it comes afterwards, and a value of <code>0</code> if they are equal.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">"hello"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token string">"world"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -1</span>
</code></pre></div><p>The <code>></code> and <code><</code> operators can also be used to compare strings lexicographically, but they cannot return a value of zero (this can be tested with the <code>==</code> equality operator). As a result, a form of the <code>localeCompare()</code> function can be written like so:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">strcmp</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>a <span class="token operator">===</span> b<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">></span> b<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">strcmp</span><span class="token punctuation">(</span><span class="token string">"hello"</span><span class="token punctuation">,</span> <span class="token string">"world"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">strcmp</span><span class="token punctuation">(</span><span class="token string">"hello"</span><span class="token punctuation">,</span> <span class="token string">"hello"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">strcmp</span><span class="token punctuation">(</span><span class="token string">"world"</span><span class="token punctuation">,</span> <span class="token string">"hello"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>
</code></pre></div><p>This is especially useful when using a sorting function that compares based on the sign of the return value (such as <code>sort</code>).</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"bananas"</span><span class="token punctuation">,</span> <span class="token string">"cranberries"</span><span class="token punctuation">,</span> <span class="token string">"apples"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> a<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ "apples", "bananas", "cranberries" ]</span>
</code></pre></div><h2 id="access-character-at-index-in-string"><a href="#access-character-at-index-in-string" class="header-anchor">#</a> Access character at index in string</h2> <p>Use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt" target="_blank" rel="noopener noreferrer"><code>charAt()</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> to get a character at the specified index in the string.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> string <span class="token operator">=</span> <span class="token string">"Hello, World!"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> string<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "o"</span>
</code></pre></div><p>Alternatively, because strings can be treated like arrays, use the index via <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors" target="_blank" rel="noopener noreferrer">bracket notation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> string <span class="token operator">=</span> <span class="token string">"Hello, World!"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> string<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "o"</span>
</code></pre></div><p>To get the character code of the character at a specified index, use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt" target="_blank" rel="noopener noreferrer"><code>charCodeAt()</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> string <span class="token operator">=</span> <span class="token string">"Hello, World!"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> string<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 111</span>
</code></pre></div><p>Note that these methods are all getter methods (return a value). Strings in JavaScript are immutable. In other words, none of them can be used to set a character at a position in the string.</p> <h2 id="escaping-quotes"><a href="#escaping-quotes" class="header-anchor">#</a> Escaping quotes</h2> <p>If your string is enclosed (i.e.) in single quotes you need to escape the inner literal quote with <strong>backslash</strong> <code>\</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> text <span class="token operator">=</span> <span class="token string">'L\'albero means tree in Italian'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> text <span class="token punctuation">)</span><span class="token punctuation">;</span> \\ <span class="token string">"L'albero means tree in Italian"</span>
</code></pre></div><p>Same goes for double quotes:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> text <span class="token operator">=</span> <span class="token string">"I feel \"high\""</span><span class="token punctuation">;</span>
</code></pre></div><p>Special attention must be given to escaping quotes if you're storing HTML representations within a String, since HTML strings make large use of quotations i.e. in attributes:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> content <span class="token operator">=</span> <span class="token string">"<p class=\"special\">Hello World!</p>"</span><span class="token punctuation">;</span> <span class="token comment">// valid String</span>
<span class="token keyword">var</span> hello <span class="token operator">=</span> <span class="token string">'<p class="special">I\'d like to say "Hi"</p>'</span><span class="token punctuation">;</span> <span class="token comment">// valid String</span>
</code></pre></div><p>Quotes in HTML strings can also be represented using <code>&apos;</code> (or <code>&#39;</code>) as a single quote and <code>&quot;</code> ( or <code>&#34;</code>) as double quotes.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> hi <span class="token operator">=</span> <span class="token string">"<p class='special'>I'd like to say &quot;Hi&quot;</p>"</span><span class="token punctuation">;</span> <span class="token comment">// valid String</span>
<span class="token keyword">var</span> hello <span class="token operator">=</span> <span class="token string">'<p class="special">I&apos;d like to say "Hi"</p>'</span><span class="token punctuation">;</span> <span class="token comment">// valid String</span>
</code></pre></div><p><strong>Note:</strong> The use of <code>&apos;</code> and <code>&quot;</code> will not overwrite double quotes that browsers can automatically place on attribute quotes. For example <code><p class=special></code> being made to <code><p class="special"></code>, using <code>&quot;</code> can lead to <code><p class=""special""></code> where <code>\"</code> will be <code><p class="special"></code>.</p> <p>If a string has <code>'</code> and <code>"</code> you may want to consider using template literals (<strong>also known as template strings in previous ES6 editions</strong>), which do not require you to escape <code>'</code> and <code>"</code>. These use backticks (```js) instead of single or double quotes.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">"Escaping " and ' can become very annoying</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</code></pre></div><h2 id="trim-whitespace"><a href="#trim-whitespace" class="header-anchor">#</a> Trim whitespace</h2> <p>To trim whitespace from the edges of a string, use <code>String.prototype.trim</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string">" some whitespaced string "</span><span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "some whitespaced string"</span>
</code></pre></div><p>Many JavaScript engines, but <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft#Browser_compatibility" target="_blank" rel="noopener noreferrer">not Internet Explorer<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, have implemented non-standard <code>trimLeft</code> and <code>trimRight</code> methods. There is a <a href="https://github.com/sebmarkbage/ecmascript-string-left-right-trim" target="_blank" rel="noopener noreferrer">proposal<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, currently at Stage 1 of the process, for standardised <code>trimStart</code> and <code>trimEnd</code> methods, aliased to <code>trimLeft</code> and <code>trimRight</code> for compatibility.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Stage 1 proposal</span>
<span class="token string">" this is me "</span><span class="token punctuation">.</span><span class="token function">trimStart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "this is me "</span>
<span class="token string">" this is me "</span><span class="token punctuation">.</span><span class="token function">trimEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// " this is me"</span>
<span class="token comment">// Non-standard methods, but currently implemented by most engines</span>
<span class="token string">" this is me "</span><span class="token punctuation">.</span><span class="token function">trimLeft</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "this is me "</span>
<span class="token string">" this is me "</span><span class="token punctuation">.</span><span class="token function">trimRight</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// " this is me"</span>
</code></pre></div><h2 id="splitting-a-string-into-an-array"><a href="#splitting-a-string-into-an-array" class="header-anchor">#</a> Splitting a string into an array</h2> <p>Use <code>.split</code> to go from strings to an array of the split substrings:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token string">"one, two, three, four, five"</span>
s<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">", "</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["one", "two", "three", "four", "five"]</span>
</code></pre></div><p>Use the <strong>array method</strong> <code>.join</code> to go back to a string:</p> <div class="language-js extra-class"><pre class="language-js"><code>s<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">", "</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">"--"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "one--two--three--four--five"</span>
</code></pre></div><h2 id="strings-are-unicode"><a href="#strings-are-unicode" class="header-anchor">#</a> Strings are unicode</h2> <p><strong>All JavaScript strings are unicode!</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token string">"some ∆≈ƒ unicode ¡™£¢¢¢"</span><span class="token punctuation">;</span>
s<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8710</span>
</code></pre></div><p>There are no raw byte or binary strings in JavaScript. To effectively handle binary data, use <a href="http://stackoverflow.com/documentation/javascript/417/binary-data/1393/using-typedarrays#t=20160721143856308512" target="_blank" rel="noopener noreferrer">Typed Arrays<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <h2 id="detecting-a-string"><a href="#detecting-a-string" class="header-anchor">#</a> Detecting a string</h2> <p>To detect whether a parameter is a <strong>primitive</strong> string, use <code>typeof</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> aString <span class="token operator">=</span> <span class="token string">"my string"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> anInt <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> anObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">typeof</span> aString <span class="token operator">===</span> <span class="token string">"string"</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
<span class="token keyword">typeof</span> anInt <span class="token operator">===</span> <span class="token string">"string"</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
<span class="token keyword">typeof</span> anObj <span class="token operator">===</span> <span class="token string">"string"</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</code></pre></div><p>If you ever have a <code>String</code> object, via <code>new String("somestr")</code>, then the above will not work. In this instance, we can use <code>instanceof</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> aStringObj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">String</span><span class="token punctuation">(</span><span class="token string">"my string"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
aStringObj <span class="token keyword">instanceof</span> <span class="token class-name">String</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre></div><p>To cover both instances, we can write a simple helper function:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">isString</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">typeof</span> value <span class="token operator">===</span> <span class="token string">"string"</span> <span class="token operator">||</span> value <span class="token keyword">instanceof</span> <span class="token class-name">String</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> aString <span class="token operator">=</span> <span class="token string">"Primitive String"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> aStringObj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">String</span><span class="token punctuation">(</span><span class="token string">"String Object"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">isString</span><span class="token punctuation">(</span>aString<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
<span class="token function">isString</span><span class="token punctuation">(</span>aStringObj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
<span class="token function">isString</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
<span class="token function">isString</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</code></pre></div><p>Or we can make use of <code>toString</code> function of <code>Object</code>. This can be useful if we have to check for other types as well say in a switch statement, as this method supports other datatypes as well just like <code>typeof</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> pString <span class="token operator">=</span> <span class="token string">"Primitive String"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> oString <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">String</span><span class="token punctuation">(</span><span class="token string">"Object Form of String"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>pString<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//"[object String]"</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>oString<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//"[object String]" </span>
</code></pre></div><p>A more robust solution is to not <strong>detect</strong> a string at all, rather only check for what functionality is required. For example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> aString <span class="token operator">=</span> <span class="token string">"Primitive String"</span><span class="token punctuation">;</span>
<span class="token comment">// Generic check for a substring method</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>aString<span class="token punctuation">.</span>substring<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token comment">// Explicit check for the String substring prototype method</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>aString<span class="token punctuation">.</span>substring <span class="token operator">===</span> <span class="token class-name">String</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>substring<span class="token punctuation">)</span> <span class="token punctuation">{</span>
aString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="word-counter"><a href="#word-counter" class="header-anchor">#</a> Word Counter</h2> <p>Say you have a <code><textarea></code> and you want to retrieve info about the number of:</p> <ul><li>Characters (total)</li> <li>Characters (no spaces)</li> <li>Words</li> <li>Lines</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">wordCount</span><span class="token punctuation">(</span> <span class="token parameter">val</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">var</span> wom <span class="token operator">=</span> val<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\S+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
charactersNoSpaces <span class="token operator">:</span> val<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\s+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">,</span>
characters <span class="token operator">:</span> val<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
words <span class="token operator">:</span> wom <span class="token operator">?</span> wom<span class="token punctuation">.</span>length <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
lines <span class="token operator">:</span> val<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\r*\n</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span>length
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// Use like:</span>
<span class="token function">wordCount</span><span class="token punctuation">(</span> someMultilineText <span class="token punctuation">)</span><span class="token punctuation">.</span>words<span class="token punctuation">;</span> <span class="token comment">// (Number of words)</span>
</code></pre></div><p><a href="http://jsfiddle.net/RokoCB/5nfay7d1/206/" target="_blank" rel="noopener noreferrer">jsFiddle example<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="substrings-with-slice"><a href="#substrings-with-slice" class="header-anchor">#</a> Substrings with slice</h2> <p>Use <code>.slice()</code> to extract substrings given two indices:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token string">"0123456789abcdefg"</span><span class="token punctuation">;</span>
s<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "01234"</span>
s<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "5"</span>
</code></pre></div><p>Given one index, it will take from that index to the end of the string:</p> <div class="language-js extra-class"><pre class="language-js"><code>s<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "abcdefg"</span>
</code></pre></div><h2 id="string-find-and-replace-functions"><a href="#string-find-and-replace-functions" class="header-anchor">#</a> String Find and Replace Functions</h2> <p>To search for a string inside a string, there are several functions:</p> <h3 id="indexof-searchstring-and-lastindexof-searchstring"><a href="#indexof-searchstring-and-lastindexof-searchstring" class="header-anchor">#</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf" target="_blank" rel="noopener noreferrer"><code>indexOf( searchString )</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf" target="_blank" rel="noopener noreferrer"><code>lastIndexOf( searchString )</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <p><code>indexOf()</code> will return the index of the first occurrence of <code>searchString</code> in the string. If <code>searchString</code> is not found, then <code>-1</code> is returned.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> string <span class="token operator">=</span> <span class="token string">"Hello, World!"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> string<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">"o"</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 4</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> string<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">"foo"</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -1</span>
</code></pre></div><p>Similarly, <code>lastIndexOf()</code> will return the index of the last occurrence of <code>searchstring</code> or <code>-1</code> if not found.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> string <span class="token operator">=</span> <span class="token string">"Hello, World!"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> string<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">"o"</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> string<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">"foo"</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// -1</span>
</code></pre></div><h3 id="includes-searchstring-start"><a href="#includes-searchstring-start" class="header-anchor">#</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes" target="_blank" rel="noopener noreferrer"><code>includes( searchString, start )</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <p><code>includes()</code> will return a boolean that tells whether <code>searchString</code> exists in the string, starting from index <code>start</code> (defaults to 0). This is better than <code>indexOf()</code> if you simply need to test for existence of a substring.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> string <span class="token operator">=</span> <span class="token string">"Hello, World!"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> string<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">"Hello"</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> string<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">"foo"</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</code></pre></div><h3 id="replace-regexp-substring-replacement-replacefunction"><a href="#replace-regexp-substring-replacement-replacefunction" class="header-anchor">#</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace" target="_blank" rel="noopener noreferrer"><code>replace( regexp|substring, replacement|replaceFunction )</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <p><code>replace()</code> will return a string that has all occurrences of substrings matching the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp" target="_blank" rel="noopener noreferrer">RegExp<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <code>regexp</code> or string <code>substring</code> with a string <code>replacement</code> or the returned value of <code>replaceFunction</code>.</p> <p>Note that this does not modify the string in place, but returns the string with replacements.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> string <span class="token operator">=</span> <span class="token string">"Hello, World!"</span><span class="token punctuation">;</span>
string <span class="token operator">=</span> string<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span> <span class="token string">"Hello"</span><span class="token punctuation">,</span> <span class="token string">"Bye"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> string <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "Bye, World!"</span>
string <span class="token operator">=</span> string<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">W.{3}d</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">"Universe"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> string <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "Bye, Universe!"</span>
</code></pre></div><p><code>replaceFunction</code> can be used for conditional replacements for regular expression objects (i.e., with use with <code>regexp</code>). The parameters are in the following order:</p> <table><thead><tr><th>Parameter</th> <th>Meaning</th></tr></thead> <tbody><tr><td><code>match</code></td> <td>the substring that matches the entire regular expressiong</td></tr> <tr><td><code>g1</code>, <code>g2</code>, <code>g3</code>, ...</td> <td>the matching groups in the regular expression</td></tr> <tr><td><code>offset</code></td> <td>the offset of the match in the entire string</td></tr> <tr><td><code>string</code></td> <td>the entire string</td></tr></tbody></table> <p>Note that all parameters are optional.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> string <span class="token operator">=</span> <span class="token string">"heLlo, woRlD!"</span><span class="token punctuation">;</span>
string <span class="token operator">=</span> string<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">([a-zA-Z])([a-zA-Z]+)</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">match<span class="token punctuation">,</span> g1<span class="token punctuation">,</span> g2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> g1<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> g2<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> string <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "Hello, World!"</span>
</code></pre></div><h2 id="string-representations-of-numbers"><a href="#string-representations-of-numbers" class="header-anchor">#</a> String Representations of Numbers</h2> <p>JavaScript has native conversion from <strong>Number</strong> to it's <strong>String representation</strong> for any base from <strong>2 to 36</strong>.</p> <p>The most common representation after <strong>decimal (base 10)</strong> is <strong>hexadecimal (base 16)</strong>, but the contents of this section work for all bases in the range.</p> <p>In order to convert a <strong>Number</strong> from decimal (base 10) to it's hexadecimal (base 16) <strong>String representation</strong> the <strong>toString</strong> method can be used with <strong>radix <code>16</code></strong>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// base 10 Number</span>
<span class="token keyword">var</span> b10 <span class="token operator">=</span> <span class="token number">12</span><span class="token punctuation">;</span>
<span class="token comment">// base 16 String representation</span>
<span class="token keyword">var</span> b16 <span class="token operator">=</span> b10<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "c"</span>
</code></pre></div><p>If the number represented is an integer, the inverse operation for this can be done with <code>parseInt</code> and the <strong>radix <code>16</code></strong> again</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// base 16 String representation</span>
<span class="token keyword">var</span> b16 <span class="token operator">=</span> <span class="token string">'c'</span><span class="token punctuation">;</span>
<span class="token comment">// base 10 Number</span>
<span class="token keyword">var</span> b10 <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>b16<span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 12</span>
</code></pre></div><p>To convert an arbitrary number (i.e. non-integer) from it's <strong>String representation</strong> into a <strong>Number</strong>, the operation must be split into two parts; the integer part and the fraction part.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> b16 <span class="token operator">=</span> <span class="token string">'3.243f3e0370cdc'</span><span class="token punctuation">;</span>
<span class="token comment">// Split into integer and fraction parts</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>i16<span class="token punctuation">,</span> f16<span class="token punctuation">]</span> <span class="token operator">=</span> b16<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Calculate base 10 integer part</span>
<span class="token keyword">let</span> i10 <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>i16<span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
<span class="token comment">// Calculate the base 10 fraction part</span>
<span class="token keyword">let</span> f10 <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>f16<span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span> <span class="token operator">/</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">,</span> f16<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 0.14158999999999988</span>
<span class="token comment">// Put the base 10 parts together to find the Number</span>
<span class="token keyword">let</span> b10 <span class="token operator">=</span> i10 <span class="token operator">+</span> f10<span class="token punctuation">;</span> <span class="token comment">// 3.14159</span>
</code></pre></div><p><strong>Note 1:</strong> Be careful as small errors may be in the result due to differences in what is possible to be represented in different bases. It may be desirable to perform some kind of rounding afterwards.<br> <strong>Note 2:</strong> Very long representations of numbers may also result in errors due to the accuracy and maximum values of <strong>Numbers</strong> of the environment the conversions are happening in.</p> <h2 id="character-code"><a href="#character-code" class="header-anchor">#</a> Character code</h2> <p>The method <code>charCodeAt</code> retrieves the Unicode character code of a single character:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> charCode <span class="token operator">=</span> <span class="token string">"µ"</span><span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// The character code of the letter µ is 181</span>
</code></pre></div><p>To get the character code of a character in a string, the 0-based position of the character is passed as a parameter to <code>charCodeAt</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> charCode <span class="token operator">=</span> <span class="token string">"ABCDE"</span><span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// The character code of "D" is 68</span>
</code></pre></div><p>Some Unicode symbols don't fit in a single character, and instead require two UTF-16 surrogate pairs to encode. This is the case of character codes beyond 2<sup>16</sup> - 1 or 63553. These extended character codes or <strong>code point</strong> values can be retrieved with <code>codePointAt</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// The Grinning Face Emoji has code point 128512 or 0x1F600</span>
<span class="token keyword">var</span> codePoint <span class="token operator">=</span> <span class="token string">"😀"</span><span class="token punctuation">.</span><span class="token function">codePointAt</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="string-to-upper-case"><a href="#string-to-upper-case" class="header-anchor">#</a> String to Upper Case</h2> <blockquote></blockquote> <p>String.prototype.toUpperCase():</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'qwerty'</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'QWERTY'</span>
</code></pre></div><h2 id="string-to-lower-case"><a href="#string-to-lower-case" class="header-anchor">#</a> String to Lower Case</h2> <p>String.prototype.toLowerCase()</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'QWERTY'</span><span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'qwerty'</span>
</code></pre></div><h2 id="find-the-index-of-a-substring-inside-a-string"><a href="#find-the-index-of-a-substring-inside-a-string" class="header-anchor">#</a> Find the index of a substring inside a string</h2> <p>The <code>.indexOf</code> method returns the index of a substring inside another string (if exists, or -1 if otherwise)</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string">'Hellow World'</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Wor'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 7</span>
</code></pre></div><p><code>.indexOf</code> also accepts an additional numeric argument that indicates on what index should the function start looking</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string">"harr dee harr dee harr"</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">"dee"</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 14</span>
</code></pre></div><p>You should note that <code>.indexOf</code> is case sensitive</p> <div class="language- extra-class"><pre class="language-text"><code>
'Hellow World'.indexOf('WOR'); // -1
</code></pre></div><h2 id="repeat-a-string"><a href="#repeat-a-string" class="header-anchor">#</a> Repeat a String</h2> <p>This can be done using the <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-string.prototype.repeat" target="_blank" rel="noopener noreferrer">.repeat()<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> method:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string">"abc"</span><span class="token punctuation">.</span><span class="token function">repeat</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Returns "abcabcabc"</span>
<span class="token string">"abc"</span><span class="token punctuation">.</span><span class="token function">repeat</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Returns ""</span>
<span class="token string">"abc"</span><span class="token punctuation">.</span><span class="token function">repeat</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Throws a RangeError</span>
</code></pre></div><p>In the general case, this should be done using a correct polyfill for the ES6 <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-string.prototype.repeat" target="_blank" rel="noopener noreferrer">String.prototype.repeat()<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> method. Otherwise, the idiom <code>new Array(n + 1).join(myString)</code> can repeat <code>n</code> times the string <code>myString</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> myString <span class="token operator">=</span> <span class="token string">"abc"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> n <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span>n <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>myString<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Returns "abcabcabc"</span>
</code></pre></div><h4 id="syntax"><a href="#syntax" class="header-anchor">#</a> Syntax</h4> <ul><li>"string literal"</li> <li>'string literal'</li> <li>"string literal with 'mismatching quotes'" // no errors; quotes are different.</li> <li>"string literal with "escaped quotes"" // no errors; quotes are escaped.</li> <li><code>template string ${expression}</code></li> <li>String("a b c") // returns string when called in non-constructor context</li> <li>new String("a b c") // the String object, not the string primitive</li></ul></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/devtut/generate/edit/master/docs/javascript/strings.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/javascript/datatypes-in-javascript.html" class="prev">
Datatypes in Javascript
</a></span> <span class="next"><a href="/javascript/date.html">
Date
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/assets/js/app.1779e102.js" defer></script><script src="/assets/js/3.2cfa8016.js" defer></script><script src="/assets/js/1787.8dffd925.js" defer></script>
</body>
</html>