String + or Literals Template
Tags: javascript, node, programming, career
Published: 2023-07-11 16:03:22

Today, I saw a [PR](https://github.com/vercel/next.js/pull/52517/files) for Next.js that changed the path joined operation to string concatenation. I usually use template literals when concatenating strings, but this operation makes me feel that its effect may be better. Let's test it out.

```ts
import { join } from 'path'
const absolutePath = join(dir, part.name)
// =>
import { sep } from 'path'
const absolutePath = dir + sep + part.name
```

## Test

> Device Information:
>
> - AMD Ryzen 5 5600X 6-Core Processor 3.70 GHz.
> - 16.0 GB
> - node v18.12.1

```js
const loopTimes = 10 ** 3

console.log('loop times:', loopTimes)
for (let j = 0; j < 10; j++) {
	{
		console.time('Template Literals')

		for (let i = 0; i < loopTimes; i++) {
			const string = `2920581597${'9755748451'}6731841261${'4148087606'}`
		}

		console.timeEnd('Template Literals')
	}

	{
		console.time('String Operation')

		for (let i = 0; i < loopTimes; i++) {
			const string = '7470435977' + '5509065748' + '8216834146' + '2266350600'
		}

		console.timeEnd('String Operation')
	}
}
```

### Loop 10 \*\* 3 times

```bash
$ node literals.js
loop times: 1000
Template Literals: 0.108ms
String Operation: 0.059ms
Template Literals: 0.048ms
String Operation: 0.057ms
Template Literals: 0.05ms
String Operation: 0.395ms
Template Literals: 0.184ms
String Operation: 0.052ms
Template Literals: 0.048ms
String Operation: 0.052ms
Template Literals: 0.044ms
String Operation: 0.048ms
Template Literals: 0.048ms
String Operation: 0.266ms
Template Literals: 0.018ms
String Operation: 0.024ms
Template Literals: 0.002ms
String Operation: 0.001ms
Template Literals: 0.002ms
String Operation: 0.002ms
```

### Loop 10 \*\* 6 times

```bash
loop times: 1000000
Template Literals: 2.425ms
String Operation: 1.251ms
Template Literals: 2.349ms
String Operation: 0.325ms
Template Literals: 0.324ms
String Operation: 0.324ms
Template Literals: 0.324ms
String Operation: 0.432ms
Template Literals: 0.324ms
String Operation: 0.347ms
Template Literals: 0.324ms
String Operation: 0.325ms
Template Literals: 0.324ms
String Operation: 0.324ms
Template Literals: 0.324ms
String Operation: 0.327ms
Template Literals: 0.351ms
String Operation: 0.467ms
Template Literals: 0.467ms
String Operation: 0.353ms
```

### Loop 10 \*\* 9 times

```bash
$ node literals.js
loop times: 1000000000
Template Literals: 327.606ms
String Operation: 326.944ms
Template Literals: 328.332ms
String Operation: 324.067ms
Template Literals: 324.459ms
String Operation: 326.348ms
Template Literals: 325.024ms
String Operation: 326.959ms
Template Literals: 325.483ms
String Operation: 325.172ms
Template Literals: 324.812ms
String Operation: 339.251ms
Template Literals: 325.533ms
String Operation: 325.951ms
Template Literals: 326.778ms
String Operation: 326.225ms
Template Literals: 325.101ms
String Operation: 327.872ms
Template Literals: 325.912ms
String Operation: 324.887ms
```

### Loop 10 \*\* 9 times (chrome)

import debugBrowserImage from './debug-browser.png'
import Image from 'next/image'

<Image src={debugBrowserImage} width={800} height={800} alt='cover' className='w-full border-[16px] border-brand-#1' />

### Conclusion

There is no significant difference between the two.

## Join vs. String Operation

```js
const loopTimes = 10 ** 3
import { sep, join } from 'path'

console.log('loop times:', loopTimes)
for (let j = 0; j < 10; j++) {
	{
		console.time('Path Join')

		for (let i = 0; i < loopTimes; i++) {
			const absolutePath = join('2920581597', '6731841261', '4148087606')
		}

		console.timeEnd('Path Join')
	}

	{
		console.time('String Operation')

		for (let i = 0; i < loopTimes; i++) {
			const absolutePath = '7470435977' + sep + '5509065748' + sep + '8216834146' + sep + '2266350600'
		}

		console.timeEnd('String Operation')
	}
}
```

### Loop 10 \*\* 3 times

```bash
$ node literals-join.js
loop times: 1000
Path Join: 2.878ms
String Operation: 0.115ms
Path Join: 0.757ms
String Operation: 0.309ms
Path Join: 0.902ms
String Operation: 0.108ms
Path Join: 0.474ms
String Operation: 0.063ms
Path Join: 0.761ms
String Operation: 0.072ms
Path Join: 0.747ms
String Operation: 0.066ms
Path Join: 0.242ms
String Operation: 0.003ms
Path Join: 0.445ms
String Operation: 0.006ms
Path Join: 0.444ms
String Operation: 0.002ms
Path Join: 0.583ms
String Operation: 0.002ms
```

### Loop 10 \*\* 6 times

```bash
$ node literals-join.js
loop times: 1000000
Path Join: 257.74ms
String Operation: 1.718ms
Path Join: 264.481ms
String Operation: 0.328ms
Path Join: 268.848ms
String Operation: 0.329ms
Path Join: 281.358ms
String Operation: 0.329ms
Path Join: 263.217ms
String Operation: 0.347ms
Path Join: 263.732ms
String Operation: 0.329ms
Path Join: 263.908ms
String Operation: 0.327ms
Path Join: 263.112ms
String Operation: 0.455ms
Path Join: 261.133ms
String Operation: 0.348ms
Path Join: 264.144ms
String Operation: 0.328ms
```

### Loop 10 \*\* 7 times

```bash
$ node literals-join.js
loop times: 10000000
Path Join: 2.417s
String Operation: 4.615ms
Path Join: 2.560s
String Operation: 3.26ms
Path Join: 2.530s
String Operation: 3.253ms
Path Join: 2.521s
String Operation: 3.261ms
Path Join: 2.472s
String Operation: 3.304ms
Path Join: 2.461s
String Operation: 3.229ms
Path Join: 2.447s
String Operation: 3.255ms
Path Join: 2.440s
String Operation: 3.249ms
Path Join: 2.449s
String Operation: 3.228ms
Path Join: 2.472s
String Operation: 3.383ms
```

### Conclusion

`path.join` does indeed take more time.

## Resolve vs. String Operation

```js
const loopTimes = 10 ** 7
import { sep, join, resolve } from 'path'

console.log('loop times:', loopTimes)
for (let j = 0; j < 10; j++) {
	{
		console.time('Path Resolve')

		for (let i = 0; i < loopTimes; i++) {
			const absolutePath = resolve('2920581597', '6731841261', '4148087606')
		}

		console.timeEnd('Path Resolve')
	}

	{
		console.time('String Operation')

		for (let i = 0; i < loopTimes; i++) {
			const absolutePath = '7470435977' + sep + '5509065748' + sep + '8216834146' + sep + '2266350600'
		}

		console.timeEnd('String Operation')
	}
}
```

### Loop 10 \*\* 3 times

```bash
$ node literals-join.js
loop times: 1000
Path Resolve: 3.662ms
String Operation: 0.315ms
Path Resolve: 1.307ms
String Operation: 0.105ms
Path Resolve: 1.101ms
String Operation: 0.046ms
Path Resolve: 1.615ms
String Operation: 0.037ms
Path Resolve: 0.717ms
String Operation: 0.047ms
Path Resolve: 0.564ms
String Operation: 0.039ms
Path Resolve: 0.557ms
String Operation: 0.002ms
Path Resolve: 0.539ms
String Operation: 0.004ms
Path Resolve: 0.548ms
String Operation: 0.002ms
Path Resolve: 0.698ms
String Operation: 0.002ms
```

### Loop 10 \*\* 6 times

```bash
$ node literals-join.js
loop times: 1000000
Path Resolve: 535.521ms
String Operation: 1.66ms
Path Resolve: 529.712ms
String Operation: 0.329ms
Path Resolve: 514.061ms
String Operation: 0.328ms
Path Resolve: 520.766ms
String Operation: 0.408ms
Path Resolve: 519.928ms
String Operation: 0.339ms
Path Resolve: 508.505ms
String Operation: 0.329ms
Path Resolve: 514.875ms
String Operation: 0.327ms
Path Resolve: 519.519ms
String Operation: 0.33ms
Path Resolve: 532.188ms
String Operation: 0.329ms
Path Resolve: 519.32ms
String Operation: 0.409ms
```

### Loop 10 \*\* 7 times

```bash
$ node literals-join.js
loop times: 10000000
Path Resolve: 5.361s
String Operation: 4.812ms
Path Resolve: 5.148s
String Operation: 3.381ms
Path Resolve: 5.129s
String Operation: 3.279ms
Path Resolve: 5.053s
String Operation: 3.272ms
Path Resolve: 5.055s
String Operation: 3.259ms
Path Resolve: 4.994s
String Operation: 3.288ms
Path Resolve: 5.466s
String Operation: 3.28ms
Path Resolve: 5.010s
String Operation: 3.338ms
Path Resolve: 5.048s
String Operation: 3.279ms
Path Resolve: 5.086s
String Operation: 3.36ms
```

### Conclusion

`resolve` takes twice as long as `join`.