JavaScript/DOM String Hell and Symbolic Languages

By Xah Lee. Date: . Last updated: .

when coding JavaScript/DOM, you have lots strings such as

textEle.setAttribute("transform", `translate(0 ${y}) scale(1 -1) translate(0 ${-y})`)
const svgg = document.createElementNS("", "svg");
svgg.setAttribute("width", width.toString());
svgg.setAttribute("style", "font-size:2rem; background-color:transparent;");
path_2wk2r.setAttribute("d", "M " + sX + " " + sY + " A " + [rx, ry, φ / (2 * π) * 360, fA, fS, eX, eY].join(" "));
let directionX = document.querySelector('input[name="direction10757"]:checked').value;
document.querySelector ( '#submit_c89n7' ) .addEventListener ('click', f_update, false);

This is a major pain. Very inflexible and error prone.

Am thinking, the string hell problem can be solved if the programing language is symbolic.

[see LISP, What Does Symbolic Language Mean?]

The problem apparently is that values are strings.

Programing web with JavaScript/DOM is like that due to HTML/XML attribute values needed to be quoted as string.

Why HTML/XML attribute are strings? because back then, 1980s, SGML, (the father of HTML ) is meant just to be a text file, not programing language. And with invention of JavaScript (1995) (an effort to make web pages interactive), came DOM (1998) as effort to standardize the interaction between JavaScript and HTML , the quoted attribute value in HTML became a programing language string datatype in DOM.

The string hell problem is particularly pronounced when you have CSS 2D Transform functions [see CSS: 2D Transform] and SVG coord Transformation [see SVG: Coordinate Transformation]


<div style="transform:scale(2, 2);">xyz</div>

textEle.setAttribute("transform", `translate(0 ${y}) scale(1 -1) translate(0 ${-y})`)

js dom string value problem 2018-11-12 f01dc
JavaScript / DOM string hell problem (in TypeScript)

I think this answers a long time question i have on symbolic languages (Mathematica, lisp).

The questions is, what's the significance of symbolic languages like lisp/Mathematica other than syntactic transformation and computer algebra?

Answer: it can solve problems like the string value problem of JavaScript/DOM.

[see LISP, What Does Symbolic Language Mean?]

What String is for in Programing Languages?

I took a walk and monologued for 1 hour. Don't have the whole thing crystal clear but here's the gist.

All languages have string value type (except assembly level). What string mean? tech details differ, but basically all sequence of chars.


Character, is a unit/glyph of human writing system. Purpose of string then, is to represent human writing system in output.

A programing language is a writing system of receipe (aka algorithm) for specific (possibly abstract) machine.

[see Programing Language and Its Machine]

In a receipe, it's often needed that it prints as output in human language, or other sequence of characters. e.g. print report, or generate code (example: php → html, js → html, TeX → pdf. compiler from lang A to B.)

That's the main purpose of string in programing languages.

The “string” in HTML or originally in SGML, are actually not string in programing language sense, since SGML is not a programing language, but a documentation system.

The “string” in HTML, such as

<div class="x">...</div>

Those quotes are just delimiters. They are similar to human language English dialogue delimiters. Example: She said “Yes!”

But when over the decades JavaScript and DOM got invented, they became string in JavaScript and DOM to intercommunicate with HTML.